21

Background

I'm working in WordPress and want to display embedded Google Maps iframes. I have added a custom metabox in the backend to hold a text string.

Currently

I create the map link using Google Maps, and then save the entire embeddable iframe code. This adds another step to the work flow. I have to manually go to Google Maps, find the address, and save the iframe code.

Goal

I'd prefer to just save the address and have my PHP convert it to an iframe. Is there a way in the Google Maps API to get an iframe just by sending the address and possibly the place name?

4
  • What do you mean you can't put the address directly into the url?
    – putvande
    Jan 15, 2014 at 14:46
  • I can if I want to make it a clickable link. link. I can't though for the iframe code.
    – Kelderic
    Jan 15, 2014 at 14:51
  • 1
    I don't see why not : jsfiddle.net/8rvwt
    – putvande
    Jan 15, 2014 at 14:54
  • 2
    Your fiddle is using the old Google Maps.
    – Kelderic
    Jan 15, 2014 at 14:56

4 Answers 4

30

Updated As of Jan. 2016

Google allows for a URL call that uses an address directly and works in an iframe. You just need to tell Google (as coding addicted pointed out) in the call that the output is embedded.

You make a call to:

https://www.google.com/maps

And you give two GET parameters:

q=[ADDRESS]
output=embed

The iframe call would look like this in HTML:

<iframe src="https://www.google.com/maps?q=[ADDRESS]&output=embed"></iframe>

Example:

<iframe src="https://www.google.com/maps?q=Randall Miller %26 Associates 300 E Broadway, Logansport, IN 46947&output=embed"></iframe>

So using PHP, which was part of my original question, I'd put:

<iframe src="https://www.google.com/maps?q=<?php echo $name . ' ' . $address; ?>&output=embed"></iframe>

This is working as of July, 14, 2016.

6
  • I know I'm late to the game, but thought I'd share anyway for others. The ampersand (&) isn't escaped, so when you load up that url you're actually telling the website to ignore everything after the ampersand or that it should try to evaluate the stuff after the ampersand as something else. If you replace the "&" with "%26" (without quotes), you'll fix the initial problem.
    – hazrpg
    Mar 26, 2014 at 14:50
  • I'm glad Google has fixed that, also nice find with the "near" tag. Thanks for attributing me in your answer.
    – hazrpg
    May 16, 2014 at 14:19
  • The near tag doesn't seem to be a good solution (maybe something's changed?). The near example you give pulls up the Randall Miller & Associates at 145 E 3rd St, Marion, IN 46952
    – henry
    Nov 4, 2015 at 22:00
  • AndyM, your answer doesn't seems to work anymore. If I copy and past your iframe, it's not working, nothing shows up. Any updates on your solution? Jan 17, 2016 at 17:11
  • This one is working: src='https://maps.google.com/maps?&q="your_address_formated_as_you_want"&output=embed' Maybe just update your answer if you're fine with it or I can put an answer. Jan 17, 2016 at 19:48
27

Maybe it's little bit late but just in case any one needed it

to get the location in the new api formation follow these steps

  • Visit: https://www.google.com/maps/ and search for the area you want to display on your site.
  • Once the area is shown on the map,open side drawer if it exists or click the gear (cog) icon on the bottom right of the screen if it exists.
  • Click the "Share" button.
  • Click the "Embed map" tap.
  • Choose your options and copy the iframe code given to you on that screen.

Sample:

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d852.8754667521503!2d29.96481543232134!3d31.23452741247449!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0000000000000000%3A0x2eb3093918d73855!2sHeba!5e0!3m2!1sen!2seg!4v1446570384113" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

enter image description here

3
  • Hi Mohammad. Thanks for the late answer. However, your answer doesn't work. The address isn't in the final iframe. The goal here is to convert an address into an iframe.
    – Kelderic
    Nov 3, 2015 at 17:14
  • Hi Andy In case you didn't solve it already please post the address you want to convert and I'll try with it. Do you want to display google maps iframe in your site pointing to that address or what? :)
    – Mohammad
    Nov 3, 2015 at 17:23
  • It's already solved ... see the above answer. The final URL is what goes into the iframe scr attribute.
    – Kelderic
    Nov 3, 2015 at 17:24
3

The solutions wasn't working for me (jan 2016). Here is what I used in my iframe to get it:

src='https://maps.google.com/maps?&q=your_address_formated_as_you_want&output‌​=embed'

Complete iframe code:

<iframe src='https://maps.google.com/maps?&q=your_address_formated_as_you_want&output‌​=embed'></iframe>
2
  • I've updated the answer with the new information about output, thank you! Please note, I tested and found that the double quotations are not needed.
    – Kelderic
    Jan 22, 2016 at 19:24
  • Great! I think that I put the double quotations as a 'reflex' to mark that the sentence was to changed in your code. I'll remove them for clarity. Jan 22, 2016 at 19:30
2

In your answer, you said you fixed it but you had to reverse them. The problem was actually due to not escaping the special characters in the URL. Ampersand (&) is a special character in the address bar that tells the server you are passing it a variable, so essentially everything after the ampersand is being ignored.

The fix is simple, change & with %26.

E.g.

https://www.google.com/maps/preview#!q=Randall Miller %26 Associates, 300 E Broadway, Logansport, IN 46947

Personally I would escape everything else too, such as the spaces with %20 and the commas with %2C.

E.g.

https://www.google.com/maps/preview#!q=Randall%20Miller%20%26%20Associates%2C%20300%20E%20Broadway%2C%20Logansport%2C%20IN%2046947

For a list of escape codes, please visit this page.

I know the escape codes makes it harder to read, but it prevents any faults/errors/bugs from happening.

2
  • That's so weird that it does that. Is it possible that Google has released different versions for different locales? (I'm in the UK). Here is what I see when I type in that second URL into a browser: dropbox.com/s/djp4v8cwvxxeprr/… - I know the url is different to what I pasted in, but google redirected it to that automatically. Also, thanks for the +1 :).
    – hazrpg
    Apr 3, 2014 at 14:46
  • Seems to work here too, nice find! I guess it could be any combination of the above, only Google will really know. Glad you find a solution though.
    – hazrpg
    May 16, 2014 at 14:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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