Embed Custom Google Map In Your Blog (with CheckBox Layer Toggle)

A guide on how to embed a customized Google Map in your blog or website and use checkboxes to toggle each layer ON and OFF (using Google Maps API).



Google have come up with My Maps feature which allows users to create their own maps and embed them in blogs or websites. Unfortunately the level of customization that can be done is fairly limited. If you are a power user, confident around codes and wants a higher level of customization in your embedded maps, then dive right in

Check out the demo below. Tick each box to view it's corresponding layer.




Custom Map - Demo
If the map does not automatically load. Click here

Places of interest
Parks and Fields
Jogging Path
Fastfood Outlet
Fastfood Delivery Coverage




Getting Started - How It Works
Using javascript, API calls are made to Google which will load and initialize the map onto you page. Below is the function that initializes the map.

The size of the Map will be according to the size of it's container (a table cell). I centered the map to my neighborhood, latitude/longitude 3.055, 101.69. Zoom level is 15. The higher the value, the closer the map is zoomed in. I used G_HYBRID_MAP to show satellite imagery of the area as default


function initialize() {
map = new GMap2(document.getElementById("map_canvas"),{googleBarOptions:{showOnLoad:true}});
map.setCenter(new GLatLng(3.055, 101.69), 15);
map.setUIToDefault();
map.enableGoogleBar();
map.setMapType(G_HYBRID_MAP);
}



When a box is checked, an external KML  file will be called and overlayed on the map (read more on KML files). The overlay could be in the form of placemarks, polygons and path depending on the KML file content. When unchecked the overlay will be removed from the map. The code that does the job:

if (box.checked){
// The location where the KML file is stored online. Change the URL to point to your own KML
layer1 = new GGeoXml("https://sites.google.com/site/easterngeek/filehost/Places_of_interest.kml");
// Ovelay the layer onto the map
map.addOverlay(layer1);
}
// If unchecked
else{
// Remove the overlayed layer
map.removeOverlay(layer1);
}

The rest of the codes can be downloaded from the links at the end of this post.

Get The Google Maps API Key
If you are planning to embed your Map in your own blog / website, the very first thing you need to do is to Sign up for a Google Maps API key.


NOTE: You need to have a Google account to generate the key. If you don’t already have one, then sign-up for an account first.

Each generated KEY is unique for a particular blog / website domain. Without a valid key the Google Maps API simply won’t work in your blog / website. Below is the key for this blog (the string after key=), get one of your own.


<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAADp6cH6COFdv8l5cH_JuBMhS-eXW-FPH1CVlSll9vtii0Rdce0RSPBJvldbys5W_TxTV9EI9sWmYqmg" type="text/javascript">
</script>

Create Your KML Files
You will need to create KML files containing elements you want to overlay onto the map. They could be in the form of placemarks, polygons and path depending on the KML file content.

KML (Keyhole Markup Language) is an XML based file format used to display geographic data in an Earth browser such as Google Earth, Google Maps, and Google Maps for mobile. With some tweakings, it can even be viewed on Bing Maps and Microsoft Virtual Earth.

Read more on the simple way to create KML / KMZ files without actually knowing the syntax. You can also download the Sample KML files there.




Publishing / Hosting Your KML Files Online
For a KML file to be able to be viewed/overlayed onto an online map, it need to be hosted somewhere online as well. Use a service that allows you to directly link to the file. Not many file hosting service allows this.

The one I’m using is Fileden.
Fileden allows you directly link to the KML files, and the service is free, a real bonus.

UPDATE: I'm no longer using Fileden as it has now been flagged by Google. Google Sites is a good alternative to host your files. Use the File Cabinet template when creating a new page and upload your files.


Embed The Map In Your Blog Post
Now we’ve come to the slightly tricky part.

If you want to embed your Map in a blog, i.e. in Blogger, copy the codes, paste it in Notepad. Edit the content how you see fit (the guides to change the values are included in the codes).

Copy the codes and paste it in your blog post (in Edit HTML mode). Once you’re done, publish it. If you’re using Blogger, the map will not appear in Preview mode.


IMPORTANT NOTE: Be sure to replace the KEY with your own Google Maps API key.

In Blogger and most blogging platform, you can't really fiddle with the BODY tag, therefore you can’t really use onload to call for the function that initializes the Map inside the BODY tag.

A simple workaround is to use an image, any image for that matter. Upon loading, the function that initializes the Map is called. The example above uses this method.

File download link: easterngeek_google_map_demo

Or Publish The HTML Page To Your Website
If you want to display your Map on a webpage, copy the codes below. HTML files are not allowed to be uploaded to my file hosting service as is. A workaround to that, paste the codes file to Notepad. Save AS > Change the text file's extension to HTML (or you can Save As > HTML).

You can now view it in your web browser locally. Edit the content the way you see fit with your favorite HTML Editor. The guides to change the values are included in the HTML file.

When done, upload the file to your website.

File download link (be sure to change this text file to HTML): easterngeek_google_map_demov2


5 comments:

Lia said...

Best gmap tutorial I've read yet! Been pouring over the gmap API v3 and my code for two days, and your tutorial solves my exact problem. THANK YOU!!!!!

JustSomeMonkey said...

Hi, I really like this script, it does exactly what I need, but it does not seem to work in Firefox. In all other browsers it works very well.

In Firefox, if you click on an kml loaded element in the map, the map just resets to its original loading position, and no elements are visible, even though the checkbox for those elements remains checked.

Any advice on how to get this to work in FF?

Thanks again for your excellent script!

JustSomeMonkey said...

Greetings, further to my previous comment about this excellent tutorial having some problems in Firefox, I have discovered with a bit of research that the Skype addon is the issue. Updating Skype to the latest version stops the problem and allows full functionality.

Thanks again for a great script!

Roch said...

Is there a way to have an embed map of bing using the bird's eye view but zoomed out? The default zoom is too close and can't really show the whole neighborhood.

David Bierman said...

Is there a way to load the map so that there are no street labels?

I think this map.setMapType(G_HYBRID_MAP); part of the code needs to be modified but I don't know what to do.