PhpRiot
Become Zend Certified

Prepare for the ZCE exam using our quizzes (web or iPad/iPhone). More info...


When you're ready get 7.5% off your exam voucher using voucher CJQNOV23 at the Zend Store
Related Articles

Generating Static Images of Google Maps

Generating Static Google Maps

A static map is generated by sending a request to http://maps.google.com/staticmap. When requesting this URL, you must include a number of different parameters, used to specify the coordinates, the zoom level and the size of the map.

Note: For detailed instructions of the parameters to include in a request, you can visit http://code.google.com/apis/maps/documentation/staticmaps/index.html, however, I will cover the most important of these for you now.

There are two ways you can specify the location and zoom level of a map. Firstly, you can specify the latitude and longitude of the map centre. When you do this, you must also choose the zoom level of the map. The zoom level is a number in the range of 0 to 19, where 0 will give you a view of the whole world, while 19 is the closest zoom possible. Figure 1 shows an example of a map created by specifying the centre coordinates and a zoom level of 11.

Figure 1 A map created by specifying the centre point and a zoom level of 11
Figure 1: A map created by specifying the centre point and a zoom level of 11

The second way a map can be created is to specify one or more markers and let Google decide how to centre the map and which zoom level to use. Each marker is indicated on the map using the Google marker icon. Figure 2 shows an example of a map created using multiple markers.

Figure 2 A map created by specifying markers and a zoom level of 11
Figure 2: A map created by specifying markers and a zoom level of 11

Note: When creating a map using markers, it is possible for you to set the zoom level manually. Typically a map with a single marker will result in a high zoom level when (that is, zoomed in a long way), whereas you may prefer to be zoomed slightly further out.

In addition to specifying the width and height of the generated map (up to the maximum of 512x512 pixels), you can also specify the type of map to be generated. Google Maps allows you to generate two types of maps: roadmap or mobile.

The roadmap style of map is the normal (non-satellite) map you see when using Google Maps at http://maps.google.com. The mobile map type is slightly modified for optimal display on mobile devices such as a PDA or mobile phone.

Figure 3 shows the difference between these two types of maps.

Figure 3 A comparison of the roadmap (left) and mobile (right) types of maps
Figure 3: A comparison of the roadmap (left) and mobile (right) types of maps

Let's now take a look at the different parameters to use when making a request for a static image (at http://maps.google.com/staticmap).

  • key: This is your Google Maps API key.
  • size: This the size of the map to return. The width and height are combined into a single value. Thus, to request a map 400 pixels wide and 300 pixels high, the value of size would be 400x300.
  • maptype: The type of map to generate. This can be either roadmap or mobile. If not specified, the type roadmap is automatically used. You can see the differences between these two map types above in Figure 3.
  • center: This is used to specify the latitude and longitude of the map center (only required if you're not including the markers parameter). This should be a single value with the latitude and longitude separated by a comma (latitude,longitude). Thus, if you wanted to centre on the Googleplex (Google's corporate headquarters), you would specify a center value of 37.423111,-122.081783.
  • zoom: This is used to specify the zoom level of the map. You need only specify this value if you're not including the markers parameter (although you can specify it if you want to when using markers). Possible values are 0 to 19 (as described above).
  • markers: You can specify one or more markers to appear on the map by including this parameter. Each marker is separated by the vertical pipe character, and is in the format {latitude},{longitude},{color}{label}. The color and label parameters are optional, and allow you to change the look of the default marker overlay. The color can be one of red, blue or green, while the label can be any letter from A to Z.

If you wanted to generate a 500 by 300 pixel map of New York City (I looked up the coordinates earlier) at zoom level 10, you would use the URL http://maps.google.com/staticmap?key=yourKey&size=500x300&center=40.757929,-73.985506&zoom=10. This would result in a map as shown in figure 4.

Figure 4 A generated map of the Googleplex
Figure 4: A generated map of the Googleplex

Listing 1 shows a number of different examples of requesting static maps, each of which is described below. The corresponding map for each of these URLs is shown in Figures 5 to 10.

Listing 1 Several example static map requests (listing-1.txt)
Figure 5: A map of Australia
http://maps.google.com/staticmap?key=yourkey&size=500x300&center=-25.274398,133.775136&zoom=3

Figure 6: A map showing marker where my city Adelaide is
http://maps.google.com/staticmap?key=yourkey&size=500x300&markers=-34.925770,138.599732&zoom=7

Figure 7: A map showing a marker of Melbourne, Sydney and Brisbane
http://maps.google.com/staticmap?key=yourkey&size=500x300&markers=-37.814251,144.963169|-33.867139,151.207114|-27.467580,153.027892

Figure 8: Coloring and labelling each marker
http://maps.google.com/staticmap?key=yourkey&size=500x300&markers=-37.814251,144.963169,redm|-33.867139,151.207114,blues|-27.467580,153.027892,greenb

Figure 9: Displaying the default map type (roadmap) of Sydney
http://maps.google.com/staticmap?key=yourkey&size=500x300&center=-33.867139,151.207114&maptype=roadmap&zoom=13

Figure 10: Displaying the mobile map type of Sydney
http://maps.google.com/staticmap?key=yourkey&size=500x300&center=-33.867139,151.207114&maptype=mobile&zoom=13
Figure 5 A map of Australia
Figure 5: A map of Australia
Figure 6 A map showing marker where my city Adelaide is
Figure 6: A map showing marker where my city Adelaide is
Figure 7 A map showing a marker of Melbourne, Sydney and Brisbane
Figure 7: A map showing a marker of Melbourne, Sydney and Brisbane
Figure 8 Coloring and labelling each marker
Figure 8: Coloring and labelling each marker
Figure 9 Displaying the default map type (roadmap) of Sydney
Figure 9: Displaying the default map type (roadmap) of Sydney
Figure 10 Displaying the mobile map type of Sydney
Figure 10: Displaying the mobile map type of Sydney

In This Article


Additional Files