Friday 3 February 2012

Adding A Static Google Map Image to your Website / Blog

You are on the right post if you want to learn how to add a map of some place in your blog or website without the hassle of heavy coding. In this post, I'll teach you how to add a Static Google Map Image to your website or blog.(yes even with the free blog accounts at blogger or wordpress)

This method involves using Google Maps version Static Maps API V2. Yes, the current version is V3 but if you do not need the bells and whistles of the latest Google Maps, this will suffice.

Also, we will not be using lat and lng coordinates. Instead, we will be entering address places or postal codes directly.

The Code

Well, its all in a link actually. To query the Google Map that you want, you will need to use the link format below :

http://maps.googleapis.com/maps/api/staticmap?center=[place to center map at]&zoom=[zoom level]&size=[widthxheight]&maptype=[type of maps]&marker[size:(size)%7Ccolor:(red)%7C(place)]&sensor=[true or false]

Let us go through each parameter one by one

  • Center - This gives you to place to center your map at
  • Zoom - This gives the zoom level
  • Size - This gives the zoom size (there is a maximum size for the free version, for Google Business Maps, you can scale to very high resolutions)
  • Marker - Adds markers to the map, you can add more than one
    • size
    • colour
    • place
  • Sensor - Option to select whether your device has a location sensor
For the full list of parameters, you can visit http://code.google.com/apis/maps/documentation/staticmaps/ to check out their developers guide.


The link

Embedding the Google Map

<img src="http://maps.googleapis.com/maps/api/staticmap?center=orchard+road,singapore&zoom=14&size=512x256&maptype=roadmap&markers=size:mid%7Ccolor:red%7Corchard+road,singapore&sensor=false" />



As you can see, we simply wrap Google Map link with an image html tag. This makes it very easy to add a Google Map to your blog or website as it can be used as an image source.







No comments:

Post a Comment