Google Maps V2 Static Maps


/ Published in: HTML
Save to your folder(s)

Below are several different types of google static maps.

The first is a map with a single marker on the Space Needle.
The second is one with 3 marks, one on the Space Needle, one on the Seattle Science Center, and One on the EMP Museum.
The last three have the same 3 markers but varios styles.

Generally markers are separated with "|" pipes, styles are a bit more complex and require multiple parts separated with pipes and for more advanced stuff multiple markers. I have a writeup at the url.


Copy this code and paste it in your HTML
  1. <!-- Basic Boring 1 Point -->
  2. http://maps.googleapis.com/maps/api/staticmap?zoom=14&size=400x300&maptype=road&markers=219+4th+Ave+N,+Seattle,+WA+98109&sensor=false
  3.  
  4. <!-- Slightly Less Boring 3 Point. -->
  5. http://maps.googleapis.com/maps/api/staticmap?zoom=14&size=400x300&maptype=road&markers=219+4th+Ave+N,+Seattle,+WA+98109|200+2nd+Avenue+NorthSeattle,+WA+98109|325+5th+Ave+N,+Seattle,+WA+98109&sensor=false
  6.  
  7. <!-- 3 point, simple and desaturated with read roads -->
  8. http://maps.googleapis.com/maps/api/staticmap?zoom=14&size=900x600&maptype=road&style=feature:all|element:all|visibility:simplified|saturation:-99&style=feature:road|element:all|hue:0x010000|saturation:100&style=feature:road.highway|element:all|hue:0x010000|saturation:100|lightness:-50&style=feature:transit|element:all|hue:0x010000|saturation:100&style=feature:water|element:all|visibility:simplified|saturation:100|hue:0x0033ff|lightness:-15&markers=219+4th+Ave+N,+Seattle,+WA+98109|200+2nd+Avenue+NorthSeattle,+WA+98109|325+5th+Ave+N,+Seattle,+WA+98109&sensor=false
  9.  
  10. <!-- 3 point, simple night style map with black land and red roads -->
  11. http://maps.googleapis.com/maps/api/staticmap?zoom=14&size=900x600&maptype=road&style=feature:all|element:all|visibility:simplified&style=feature:all|element:all|saturation:-100|lightness:-50&style=feature:road|element:all|hue:0x010000|saturation:100|lightness:-50&style=feature:water|element:all|visibility:simplified|lightness:-100&markers=219+4th+Ave+N,+Seattle,+WA+98109|200+2nd+Avenue+NorthSeattle,+WA+98109|325+5th+Ave+N,+Seattle,+WA+98109&sensor=false
  12.  
  13. <!-- 3 point, super saturated with no street labels -->
  14. http://maps.googleapis.com/maps/api/staticmap?zoom=14&size=900x600&style=feature:all|element:geometry|saturation:100&style=feature:road|element:all|visibility:simplified&maptype=road&markers=219+4th+Ave+N,+Seattle,+WA+98109|200+2nd+Avenue+NorthSeattle,+WA+98109|325+5th+Ave+N,+Seattle,+WA+98109&sensor=false

URL: http://fatfolderdesign.com/607/code/google-maps-api-2-the-second-post-multiple-locations-map-styling-and-the-new-geolocation

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.