Webmasters: How To Put A Interactive Google Map On Any Webpage
Google Maps changed the world with their click and drag, click-zoom mapping site — and the other guys followed suit.
Now Google has finally done what YouTube used to fuel their growth — allowing users to embed their content on other people’s websites with a very easy “copy/paste” feature for the HTML snippet of code. Here’s a look at this feature.
You have have an interactive Google Map on your own website in just a couple of easy steps:
- Go to http://maps.google.com/ and find the exact location you want to feature on your own map. You also have the option of showing just the MAP view, SATELLITE view or HYBRID view (my favorite).
- Now click on the LINK TO THIS PAGE link at the upper right corner of the map which will then expand to show you a snippet of custom code.
- Just COPY this HTML code and PASTE it into any HTML page you want on your own website.
- If you want to change the actual dimensions of the map that shows up on your own webpage, click on the CUSTOMIZE AND PREVIEW EMBEDED MAP link in the expanded box.
- You’ll see this window open up, where you can SELECT pre-set sizes or input the CUSTOM SIZE you desire. You can then COPY the HTML below the map preview and PASTE the HTML into your own webpage code.
And here’s a LIVE EXAMPLE of the Google Map embeded on a webpage. (WordPress doesn’t allow iframe coding right, so the demo is on a separate page)
You should be able to click and drag the map around, zoom in and out and change the map views. The neat part is that the visitor can get directions to or from your location right from this map.
Have you embeded a map onto your own website? Let us see it in action! Post the URL of your website’s page with the Google Map embeded using the Comments section below.