Google Map API – Adding to a map to your site via iframe

There may be times when you want to add a map with markets to your website but you are using a platform like WordPress where adding html is easy adding the code for the Google Map API is not. A simple solution is to use a html iframe.

By setting  up a seperate html page with all of the required Google Map API code embedded in it, you can then call the iframe in WordPress (or any other place you can use HTML) and have a working map.

The basis usage of an iframe is just <iframe src=”URL“></iframe>, with additional options such as  height=”400″ width=”600″and frameborder=”0″.

The one little trick is to add a <a name=”start-here”></a> in the source html page just above <div id=”map_canvas”></div>

Then you use the iframe you add <iframe src=”./map.html#start-here” height=”400″ width=”600″ scrolling=”no” frameborder=”0″> </iframe>

The #start-here bit starts the iframe just at the start of your map so that it is easy to seamlessly add the map to your main project.


Speak Your Mind