CODEWITHSUNDEEP
javascriptphphtmlcss
David Eye
David Eye

Reputation: 51

How do I embed Google Maps url to website using html?

I have this Google Maps 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>

How do I embed?

Upvotes: 5

Views: 27625

Answers (5)

SakerCobalt
SakerCobalt

Reputation: 31

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.

Upvotes: 2

Syfer
Syfer

Reputation: 4489

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)

Upvotes: 9

Corey Gibson
Corey Gibson

Reputation: 343

From the looks of it, I would start on Google's 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?

Upvotes: -3

Muhammed Moussa
Muhammed Moussa

Reputation: 5205

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

Share a map or directions with others

Upvotes: 0

Ussaid Iqbal
Ussaid Iqbal

Reputation: 796

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

Upvotes: 1

Related Questions