2

i have this google map url I tried to embed using iframe to my website but it's not working

 <iframe id="iframeid"
      width="450"
      height="250"
   style="border:0"
src="https://www.google.com/maps/dir/?api=1&origin=Space+Needle+Seattle+WA&destination=Pike+Place+Market+Seattle+WA&travelmode=bicycling"
  ></iframe>

please help how to embed

Anil Rana
  • 9
  • 4
David Eye
  • 21
  • 1
  • 1
  • 2

5 Answers5

5

Here is one of the easiest ways of embedding google maps using html:

<iframe width="100%" height="600" src="https://maps.google.com/maps?width=100%&amp;height=600&amp;hl=en&amp;coord=52.70967533219885, -8.020019531250002&amp;q=1%20Grafton%20Street%2C%20Dublin%2C%20Ireland&amp;ie=UTF8&amp;t=&amp;z=14&amp;iwloc=B&amp;output=embed" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe><br />

You have to change the following:

  1. width= (width of iframe)
  2. height= (height of iframe)
  3. coord= (cordinates of the address)
  4. q= (address)
  5. z= (zoom level)

Hope this helps

Syfer
  • 4,262
  • 3
  • 20
  • 37
1

If you check the console you will find the following error,

Refused to display 'https://www.google.com/maps/dir/?api=1&origin=Space+Needle+Seattle+WA&destination=Pike+Place+Market+Seattle+WA&travelmode=bicycling' in a frame because it set 'X-Frame-Options' to 'sameorigin'.

Here you can read more about the above error

Now to fix this error change the iframe src a little as followed.

<iframe id="iframeid"
        width="450"
        height="250"
        style="border:0"
        src="https://www.google.com/maps/embed?api=1&origin=Space+Needle+Seattle+WA&destination=Pike+Place+Market+Seattle+WA&travelmode=bicycling"
></iframe>

What we did is we changed dir/ to embed

Ussaid Iqbal
  • 786
  • 1
  • 7
  • 16
1

It looks like all the google earth maps require a paid API KEY to use. However, I was able to create the embedded maps I was looking for by

  1. Using Google earth to create any overlay layers or markers and saving them as kmz files.
  2. going to maps.google.com and creating my own map
  • Go to Menu
  • Select "Your Places"
  • Select the "MAPS" tab option
  • Click 'SEE ALL YOUR MAPS'
  1. Create a new map. Add desired layers.
  2. Click on the 3 dots, Embed the maps and provides the base code to copy to your html.
  3. Your can adjust your view by adding '&' with the commands that Syfer listed above.

I was able to embed multiple maps on the page, and they load up with the same view that you select in the My maps module on google maps.

SakerCobalt
  • 39
  • 7
0

you can generate HTML code for the location from google maps, follow this.

Share a map or directions with others

Muhammed Moussa
  • 4,589
  • 33
  • 27
-3

First, check out how to ask

From the looks of it, I would start on googles developer guide, you need to request an API key. Then try to put that code with the API key put into your html code

<iframe
  width="600"
  height="450"
  frameborder="0" style="border:0"
  src="https://www.google.com/maps/embed/v1/place?key=YOUR_API_KEY
  &q=Space+Needle,Seattle+WA" allowfullscreen>
</iframe>

after that maybe you can dive a little further into detail on what "it's not working" means. Are you getting any output in the console, did it shut your computer off? any further detail would help us help you!

Corey Gibson
  • 343
  • 1
  • 17