357

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.

14 Answers 14

801

How about this?

https://maps.google.com/?q=1200 Pennsylvania Ave SE, Washington, District of Columbia, 20003

https://maps.google.com/?q=term

If you have lat-long then use below URL

https://maps.google.com/?ll=latitude,longitude

Example: maps.google.com/?ll=38.882147,-76.99017

UPDATE

As of year 2017, Google now has an official way to create cross-platform Google Maps URLs:

https://developers.google.com/maps/documentation/urls/guide

You can use links like

https://www.google.com/maps/search/?api=1&query=1200%20Pennsylvania%20Ave%20SE%2C%20Washington%2C%20District%20of%20Columbia%2C%2020003 
13
  • 8
    How can I create with Latitude and Longitude?
    – nadeem gc
    Jul 6, 2013 at 16:56
  • 4
    It seems like this method is a little flakey if the user is using the new Google Maps. To create a link that forces the resulting page to appear in classic mode, just append &output=classic to your link. So the entire thing would look like this: http://maps.google.com/?q=1200%20Pennsylvania%20Ave%20SE,%20Washington,%20District%20of%20Columbia,%2020003&output=classic
    – Matt
    Jan 31, 2014 at 15:51
  • 4
    @Matt How's it flakey? Also, output=classic won't stay around forever, and what if the user prefers the new maps?
    – Chris B
    Feb 7, 2014 at 15:00
  • 2
    Any way to get the drop pin on the map via the URL?
    – Flea
    Jul 5, 2014 at 13:53
  • 6
    This still works great (thanks @ChrisB!) but it looks like Google Maps's own format is now https://www.google.com/maps/place/1200 Pennsylvania Ave SE, Washington, District of Columbia, 20003 ¶ For some locations you can get away with using just the name... but maps.google.com/?q= and www.google.com/maps/place/ won't necessarily return the same results: https://www.google.com/maps/place/White House expands to https://www.google.com/maps/place/The+White+House,+1600+Pennsylvania+Ave+NW,+Washington,+DC+20500 but https://maps.google.com/?q=White House gives me an antique store in NC
    – henry
    Nov 4, 2014 at 18:06
74

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);             
    });
});
3
  • @Michael Jasper thanx for ur code...it got me the map in div...but my problem is pin info is gets popup...which i dnt want. so can u guide me how not to open pin info box.?????.thnx in advance...
    – Shwet
    Apr 17, 2013 at 12:49
  • 3
    Please be aware that the HTML5 <address> tag is not intended for providing postal address, but providing contact information related to the content (usually the author). developer.mozilla.org/en-US/docs/Web/HTML/Element/address Jul 19, 2015 at 23:13
  • Great answer! Thanks for sharing. I'm not sure the consequences about it but it worked even without the encodeURIComponent(). Aug 19, 2017 at 15:19
12

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.

2
  • while the example works, i wasn't able to recreate this for a German address. I ended up implementing Chris B's answer (.../?q=term).
    – gl03
    May 2, 2016 at 15:42
  • Thankfully this is now also working for german addresses. See: google.com/maps/place/… Nov 29, 2016 at 20:51
4

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

1
  • Thanks for this, nice and easy way to embed a custom map Aug 6, 2013 at 18:14
3

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/

1
  • 2
    Instead of manually trying to URL escape the string, you could use encodeURIComponent instead.
    – Samuel
    Jun 4, 2015 at 4:27
2
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

1
  • 1
    encodeURIComponent is javascript, you should be using urlencode($address);
    – ximi
    Feb 5, 2013 at 19:30
2

The best way is to use this line:

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

Remember to replace the first and second addresses when necessary.

You can look at work sample

2

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.

1
  • I used your solution in my project by just tweaking your code to my needs. It works for now. Dec 15, 2019 at 9:18
2

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.

enter image description here

1
  • It works for me. Copy this embed code and paste to your website. Oct 22, 2016 at 8:59
2

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

1

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.

0

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.

2
0

The C# Replace method usually works for me:

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

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..

Not the answer you're looking for? Browse other questions tagged or ask your own question.