Powered by Syntax Highlighter scripts!

Embed Google Map in your Blog

Ever wonder how the Store location of a super market displays the stores on a map with customized details? or the Branch Locator of Bank of America shows the Bank branches with full details?

Adding interactive maps to your blog can be very easy than you imagine - Google does all the underhood work for you :)

Step 1
1 - Login to Google Maps 
2 - "Create new Map" - enter basic details
3 - Add locations to your new map

While adding the locations to the map you can select the image from the images that are available (or) you can upload your own icon.

Once the locations are added, the My Maps screen should display something like this image.

Step 2
1 - Login to map.google.com
2 - Click on My Maps and select the Map that you want to show in your blog
3 - When the map is open with the locations in the selected map
          Click on "Link to this page" link located on Right top of the map. A popup window opens as in the image.
4 - Copy the HTML code snippet present in the "Paste HTML to embed in website" and paste inside your blog
5 - When you open/preview the blog, you should see the Google map embedded in your site as below.

Lets put a thought on the applications that are involved and the service orientered architecture concepts that went through in making this happen...

No comments: