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.

score 789 · Accepted Answer · edited Mar 03 '19 at 16:28

789

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

edited Mar 03 '19 at 16:28

SuperDJ

7,488
11
40
74

answered Aug 19 '09 at 15:54

Chris B

15,524
5
33
40

1

Just wanted to "UP" arrow it. – Si8 May 22 '13 at 19:04
8

How can I create with Latitude and Longitude? – nadeem gc Jul 06 '13 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 '14 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 07 '14 at 15:00
@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. – Matt Feb 07 '14 at 15:51
2

Any way to get the drop pin on the map via the URL? – Flea Jul 05 '14 at 13:53
5

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 04 '14 at 18:06
1

@nadeemgc same thing just add them separated by a comma like so http://maps.google.com/?q=latitude,longitude eg http://maps.google.com/?q=26.503295,-80.068543 I just tried it and works well – Jesus Rodriguez Jun 01 '16 at 16:19
@nadeemgc this is the new format `https://www.google.com/maps/preview/@,,z` – BoCyrill Jul 22 '16 at 00:32
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: https://developers.google.com/maps/documentation/javascript/places – Trevor Nov 13 '16 at 20:25
@ChrisB: Will this work for both Android and iPhone for all browsers? – VBMali Dec 21 '16 at 05:23
Is there a way to include departure time when requesting directions? – user2952819 Dec 01 '17 at 10:46
Thanks for the updated. I found that if any links to Google Maps from inside `` such as normal link `<a class="external-link" 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](https://codepen.io/ve3/pen/xxXXmGv) – vee Dec 11 '22 at 04:09

Michael Jasper · Answer 2 · 2013-01-10T20:21:02.530

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

edited Jan 10 '13 at 20:21

answered Oct 26 '11 at 03:45

Michael Jasper

7,962
4
40
60

@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 '13 at 12:49
3

Please be aware that the HTML5 `
` tag is not intended for providing postal address, but providing contact information related to the content (usually the author). https://developer.mozilla.org/en-US/docs/Web/HTML/Element/address
– Neograph734 Jul 19 '15 at 23:13
Great answer! Thanks for sharing. I'm not sure the consequences about it but it worked even without the `encodeURIComponent()`. – moreirapontocom Aug 19 '17 at 15:19

score 12 · Answer 3 · answered Feb 23 '16 at 15:57

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.

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 02 '16 at 15:42
Thankfully this is now also working for german addresses. See: https://www.google.com/maps/place/Fritz-Reuter-Schule%2C+K%C3%B6nigsberger+Stra%C3%9Fe%2C+Tornesch%2C+Deutschland/ — Yannick Schuchmann, Nov 29 '16 at 20:51

score 4 · Answer 4 · answered Jun 15 '12 at 19:10

4

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

answered Jun 15 '12 at 19:10

Nolmë Informatique

612
6
13

Thanks for this, nice and easy way to embed a custom map – Ralph Willgoss Aug 06 '13 at 18:14

score 3 · Answer 5 · answered Mar 17 '15 at 15:33

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/

Instead of manually trying to URL escape the string, you could use `encodeURIComponent` instead. — Samuel, Jun 04 '15 at 04:27

Eugene Bosikov · Answer 6 · 2013-03-01T21:18:52.733

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

dhpratik · Answer 7 · 2013-02-10T17:23:58.880

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

edited Feb 10 '13 at 17:23

answered Jan 08 '13 at 17:52

dhpratik

1,100
4
19
43

1

encodeURIComponent is javascript, you should be using urlencode($address); – ximi Feb 05 '13 at 19:30

score 2 · Answer 8 · answered Sep 10 '15 at 16:52

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.

I used your solution in my project by just tweaking your code to my needs. It works for now. — Mycodingproject, Dec 15 '19 at 09:18

PCM · Answer 9 · 2016-07-19T17:55:23.773

2

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

Open Google Maps.

Make sure the map or Street View image you'd like to embed shows up on the map.

In the top left corner, click the main menu ☰.

Click Share or embed map.

At the top of the box that appears, choose the Embed map tab.

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.

edited Jul 19 '16 at 17:55

answered Sep 15 '15 at 18:48

PCM

873
8
23

It works for me. Copy this embed code and paste to your website. – Kabir Hossain Oct 22 '16 at 08:59

score 2 · Answer 10 · edited Aug 09 '18 at 10:29

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

edited Aug 09 '18 at 10:29

Lupu Silviu

1,145
11
23

answered Aug 09 '18 at 07:27

MiMFa

981
11
14

score 1 · Answer 11 · edited May 12 '11 at 18:38

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.

score 0 · Answer 12 · edited Jan 12 '14 at 08:07

0

The C# Replace method usually works for me:

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

edited Jan 12 '14 at 08:07

jmromer

2,212
1
12
24

answered Jan 12 '14 at 07:28

springerkc

169
1
5

score 0 · Answer 13 · edited Feb 18 '15 at 11:10

0

I just found this and like to share..

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

edited Feb 18 '15 at 11:10

Rizier123

58,877
16
101
156

answered Feb 18 '15 at 10:52

Unknown-Me

1

score 0 · Answer 14 · answered May 20 '11 at 13:09

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.

answered May 20 '11 at 13:09

Ed Meacham

543
1
5
19

This now leads to a 404, unfortunately. – Darren Monahan Feb 26 '17 at 05:03
1

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: http://web.archive.org/web/20110420023220/https://code.google.com/apis/maps/documentation/webservices/index.html – Ed Meacham Mar 01 '17 at 15:40

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

14 Answers14

Bonus:

Linked