Grow your CSS skills. Land your dream job.

Converting address into Google Maps link

  • # February 13, 2013 at 2:26 pm

    Howdy folks,

    I’m working on a way to convert a text address to Google Maps link, I [found this solution on stackoverflow](http://stackoverflow.com/questions/1300838/how-to-convert-an-address-into-a-google-maps-link-not-map “”), the only problem is, the output removes the line breaks and spans I have in place. I don’t know javascript well enough to figure out how to edit this to even possibly just insert the anchor tag, without removing the html tags I already have in place.

    Here’s the [pen](http://codepen.io/ChrisPlz/pen/zKfln “”).

    Any help is greatly appreciated.

    # February 13, 2013 at 2:38 pm

    Obviously it works but it looks like it’s converting the whitespace to the ‘+’ character.

    Are the breaks and spans important to the result in GMaps?

    # February 13, 2013 at 2:43 pm

    No, I’m not concerned about the additional spaces in Gmaps, it’s going to the correct address anyway. My concern is having those line breaks and the span in the presentation of the address, that little jQuery function computes the address into the link, then also outputs the address inside the anchor tag without the `` or `
    ` tags.

    I know so little about jQuery that it has me stumped..I was thinking I might be able to prepend an anchor tag with the values computed into gmaps, then append the closing anchor tag, but I really don’t know where to start..

    # February 13, 2013 at 2:48 pm

    Ohhh…you mean that you want the address in the browser as it’s coded and not shoved into a string.

    That being the case, I think the best thing to do is to have a set of spans (address lines if you will), let the JS grab the text inside each one and the concatenate all of that….then only submit it to GMaps on a click.

    I confess I’m at an early stage with JQuery but that would seem to be the logical way to do it.

    Anyone else?

    # February 13, 2013 at 3:59 pm

    I think you’ll need to translate any breaks or gaps into + symbols to create this.

    I recently did a “Get Directions” input on a customer site and it literally posts the plain text address via GET to http://maps.google.com/maps so you may be able to do something similar.

    I’ll fire up a codepen and see what I can make.

    # February 13, 2013 at 4:14 pm

    Use `$(this).html()` instead of `$(this).text()` inside the generated link element, so in this part:

    `target=’_blank’>” + $(this).html() + ““;`

    # February 13, 2013 at 4:20 pm

    I am REALLY new to JS/JQ but…..http://codepen.io/Paulie-D/pen/uCvHk

    # February 13, 2013 at 4:39 pm

    Got it – http://codepen.io/andyunleashed/pen/CGkpf

    Edit: I just realised I completely missed the point of what you’re trying to accomplish! Didn’t spot your original codepen, will have a look at that as well, but the text input turned into a link is pretty cool also!

    # February 13, 2013 at 7:07 pm

    Perfect, @CrocoDillon had the solution. Just swapping the `$(this).text()` with `$(this).html()` did it.

    I have an input for the client to put in an address field similar to an online form, and the output on the page was what my pen was, span and line-breaks auto populated. But that jQuery I had was removing the line breaks and span tag.

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".