[google-maps] How to convert an address into a Google Maps Link (NOT MAP)

After looking (Googling) on the web for a while, I can find nothing that takes an address like:

1200 Pennsylvania Ave SE, Washington, District of Columbia, 20003

and converts it into a clickable link:

http://maps.google.com/maps?f=q&source=s_q&hl=en&q=1200+Pennsylvania+Ave+SE,+Washington,+District+of+Columbia,+20003&sll=37.0625,-95.677068&sspn=44.118686,114.169922&ie=UTF8&cd=1&geocode=FT5MUQIdIDlp-w&split=0&ll=38.882147,-76.99017&spn=0.01064,0.027874&z=16&iwloc=A

jQuery or PHP preferred or just any useful information on this.

http://maps.google.com/maps?q=<?php echo urlencode($address); ?> 

the encode ur conver and adds all the extra elements like for spaces and all. so u can easily fetch plane text code from db and use it without worring about the special characters to be added

If you have latitude and longitude, you can use any part or all of bellow URL

https://www.google.com/maps/@LATITUDE,LONGITUDE,ZOOMNUMBERz?hl=LANGUAGE

For example: https://www.google.com/maps/@31.839472,54.361167,18z?hl=en

What about this : http://support.google.com/maps/bin/answer.py?hl=en&answer=72644

I know I'm very late to the game, but thought I'd contribute for posterity's sake.

I wrote a short jQuery function that will automatically turn any <address> tags into Google maps links.

See a demo here.

$(document).ready(function () {
   //Convert address tags to google map links - Michael Jasper 2012
   $('address').each(function () {
      var link = "<a href='http://maps.google.com/maps?q=" + encodeURIComponent( $(this).text() ) + "' target='_blank'>" + $(this).text() + "</a>";
      $(this).html(link);
   });
});

Bonus:

I also came across a situation that called for generating embedded maps from the links, and though I'd share with future travelers:

View a full demo

$(document).ready(function(){
    $("address").each(function(){                         
        var embed ="<iframe width='425' height='350' frameborder='0' scrolling='no'  marginheight='0' marginwidth='0' src='https://maps.google.com/maps?&amp;q="+ encodeURIComponent( $(this).text() ) +"&amp;output=embed'></iframe>";
        $(this).html(embed);             
    });
});

Feb, 2016:

I needed to do this based on client entered database values and without a lat/long generator. Google really likes lat/long these days. Here is what I learned:

1 The beginning of the link looks like this: https://www.google.com/maps/place/

2 Then you put your address:

• Use a + instead of any space.
• Put a comma , in front and behind the city.
• Include the postal/zip and the province/state.
• Replace any # with nothing.
• Replace any ++ or ++++ with single +

3 Put the address after the place/

4 Then put a slash at the end.

NOTE: The slash at the end was important. After the user clicks the link, Google goes ahead and appends more to the URL and they do it after this slash.

Working example for this question:

https://www.google.ca/maps/place/1200+Pennsylvania+Ave+SE,+Washington,+DC+20003/

I hope that helps.

Also, anyone wanting to manually URLENCODE the address: http://code.google.com/apis/maps/documentation/webservices/index.html#BuildingURLs

You can use that to create specific rules that meet GM standards.

I had a similar issue where I needed to accomplish this for every address on the site (each wrapped in an address tag). This bit of jQuery worked for me. It'll grab each <address> tag and wrap it in a google maps link with the address the tag contains contains!

$("address").each(function(){

    var address = $(this).text().replace(/\,/g, '');
    var url = address.replace(/\ /g, '%20');

    $(this).wrap('<a href="http://maps.google.com/maps?q=' + url +'"></a>');

}); 

Working example --> https://jsfiddle.net/f3kx6mzz/1/

I just found this and like to share..

1. search your address at maps.google.com
2. click on the gear icon at the bottom-right
3. click "shared or embed map"
4. click the short url checkbox and paste the result in href..

On http://www.labnol.org/internet/tools/short-urls-for-google-maps/6604/ they show a short URL that works pretty well

Google Maps URLs are pretty unwieldy especially when sending over an IM, tweet or email. MapOf.it provides you a quick way to link to Google Maps by simply specifying the address of the location as a search parameter.

http://mapof.it/

I used it for a few applications I've designed and it worked like a charm.

The best way is to use this line:

var mapUrl = "http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=16900+North+Bay+Road,+Sunny+Isles+Beach,+FL+33160&aq=0&sll=37.0625,-95.677068&sspn=61.282355,146.513672&ie=UTF8&hq=&hnear=16900+North+Bay+Road,+Sunny+Isles+Beach,+FL+33160&spn=0.01628,0.025663&z=14&iwloc=A&output=embed"

Remember to replace the first and second addresses when necessary.

You can look at work sample

Borrowing from Michael Jasper's and Jon Hendershot's solutions, I offer the following:

$('address').each(function() {
    var text = $(this).text();

    var q    = $.trim(text).replace(/\r?\n/, ',').replace(/\s+/g, ' ');
    var link = '<a href="http://maps.google.com/maps?q=' + encodeURIComponent(q) + '" target="_blank"></a>';

    return $(this).wrapInner(link);
});

This solution offers the following benefits over solutions previously offered:

• It will not remove HTML tags (e.g. <br> tags) within <address>, so formatting is preserved
• It properly encodes the URL
• It squashes extra spaces so that the generated URL is shorter and cleaner and human-readable after encoding
• It produces valid markup (Mr.Hendershot's solution creates <a><address></address></a> which is invalid because block-level elements such as <address> are not permitted within inline elements such as <a>.

Caveat: If your <address> tag contains block-level elements like <p> or <div>, then this JavaScript code will produce in invalid markup (because the <a> tag will contain those block-level elements). But if you're just doing stuff like this:

<address>
  The White House
  <br>
  1600 Pennsylvania Ave NW
  <br>
  Washington, D.C.  20500
</address>

Then it'll work just fine.

This is what I found from one of the Google Maps articles:

1. Open Google Maps.
2. Make sure the map or Street View image you'd like to embed shows up on the map.
3. In the top left corner, click the main menu ?☰.
4. Click Share or embed map.
5. At the top of the box that appears, choose the Embed map tab.
6. Choose the size you want, then copy the code and paste it into the source code of your website or blog.

Note: If you're using Maps in Lite mode, you won't be able to embed a map. Keep in mind that traffic information and some other Maps info might not be available in the embedded map.

The C# Replace method usually works for me:

foo = "http://maps.google.com/?q=" + address.Text.Replace(" ","+");