How to convert an address into a Google Maps Link (NOT MAP)

Question

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.

Tiling

Answer 1

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 

Medievalist

Just wanted to "UP" arrow it. – Scott

How can I create with Latitude and Longitude? – Suzannsuzanna

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 – Melchizedek

@Melchizedek How's it flakey? Also, output=classic won't stay around forever, and what if the user prefers the new maps? – Medievalist

@ChrisB Perhaps it's just something locally for me? Apologies if that's the case. In Chrome I occasionally see Google Maps redirect and lose the q parameter, not showing the correct spot on the map. In Safari I've also seen it show the correct spot on the map but not drop the pin correctly. Setting Output to Classic didn't seem to show these problems, but I definitely agree it's a bandaid and not a proper fix. – Melchizedek

Any way to get the drop pin on the map via the URL? – Diphyodont

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 – Grivet

@nadeemgc same thing just add them separated by a comma like so maps.google.com/?q=latitude,longitude eg maps.google.com/?q=26.503295,-80.068543 I just tried it and works well – Strife

@nadeemgc this is the new format https://www.google.com/maps/preview/@<latitude>,<longitude>,<zoom level>z – Businesswoman

Works very well guys and the new API is quite flexible. I recommend reading up the API documents for Google Places this will give you a lot of control over the hyperlinks you create (as an example) so you could send over a place, text search, radius to limit the search etc check out the docs: developers.google.com/maps/documentation/javascript/places – Pekan

@ChrisB: Will this work for both Android and iPhone for all browsers? – Shiverick

Is there a way to include departure time when requesting directions? – Pert

Thanks for the updated. I found that if any links to Google Maps from inside <iframe> such as normal link <a href="https://maps.google.com" target="_blank">link</a>, when user clicked it will be always open with Blocked page. I don't know why and couldn't find any policy about this. Example in Codepen – Nicks

Answer 2

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);             
    });
});

Sickening

@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... – Outgoing

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 – Gerri

Great answer! Thanks for sharing. I'm not sure the consequences about it but it worked even without the encodeURIComponent(). – Depraved

Answer 3

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.

Hutchings

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). – Bemba

Thankfully this is now also working for german addresses. See: google.com/maps/place/… – Diclinous

Answer 4

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

Gracielagracile

Thanks for this, nice and easy way to embed a custom map – Diphtheria

Answer 5

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/

Martijn

Instead of manually trying to URL escape the string, you could use encodeURIComponent instead. – Gilson

Answer 6

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

Ame

Answer 7

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

Bergschrund

encodeURIComponent is javascript, you should be using urlencode($address); – Ginseng

Answer 8

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.

Jaquesdalcroze

I used your solution in my project by just tweaking your code to my needs. It works for now. – Schaffner

Answer 9

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.

Iseult

It works for me. Copy this embed code and paste to your website. – Snowstorm

Answer 10

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

Claustral

Answer 11

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.

Bobbobb

Answer 12

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.

Headwater

This now leads to a 404, unfortunately. – Thinking

Sorry. This comment is very old... I doubt the version of the API that was being used in this question is still around, but here is what the link used to reference: web.archive.org/web/20110420023220/https://code.google.com/apis/… – Headwater

Answer 13

The C# Replace method usually works for me:

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

Florey

Answer 14

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

Abyss