How to embed Google Maps without the API

  • SHARES

By admin Comment

You’ve seen some great maps, now its time to create your own. Google recently announced the ability to embed Google Maps in your own site by simply cutting and pasting HTML. The embed code uses an iframe tag to streamline the process. To grab the code, click “Link to this page” in the top right corner and select “Paste HTML to embed in website.”

So extracting this code from the Google Maps site

<iframe width=”425″ height=”350″ frameborder=”no” scrolling=”no” marginheight=”0″ marginwidth=”0″ src=”http://maps.google.com/maps?f=q&hl=en&geocode=&q=colorado
+springs,+colorado&ie=UTF8&ll=38.956205,-104.754639&spn=0.469337,
0.933838&z=10&iwloc=addr&om=1&output=embed&s=AARTsJrvR8_nCDEAdyll
dYZydg5i0rq0Pw”></iframe>lt;br/>lt;a href=”http://maps.google.com/maps?f=q&hl=en&geocode=&q=colorado+
springs,+colorado&ie=UTF8&ll=38.956205,-104.754639&spn=0.469337,
0.933838&z=10&iwloc=addr&om=1&source=embed” style=”color:#0000FF;text-align:left;font-size:small”>View Larger Map</a>

will give you an embedded map like this:

View Larger Map

The new feature ends the need to use a third-party application to embed Google Maps, though such applications make the creation of custom maps much easier. Also, if you extract the URL from the embed code, you can create a full-screen Google map (example here).

Advertisement
Advertisement