Creating a Static Map

Tags: Tutorial, Google Maps, Static Map

The map control includes support for Google's Static Maps API. The Static Maps API allows you to create a map as an image. This significantly reduces the download required for users viewing a web page. The static map is ideal in situations where you need a map to show location, but do not require any user interaction. If you want to display a map on a mobile page then this is ideal.

Static maps support markers and polylines, so you can add basic guidance. Markers and lines are not clickable, so you cannot mimic user interaction this, but the map image itself can be made clickable.

The following markup shows how to put a basic map on a webpage.

HTML

<Reimers:GoogleStaticMap runat="server"
AlternateText="Static Map"
Center="55.6833,12.5833" 
DisplayLanguage="Danish" 
Height="512" 
Width="512" 
ID="sMap" 
Zoom="14" 
ImageFormat="Png" 
GoogleKey="YourGoogleKey" />

If you want to add overlays you can do so in the code behind. While static overlays (GoogleStaticOverlay) are not directly interchangeable with normal GoogleOverlay (they will be soon), they are added in much the same way:

C#

GoogleStaticMarker m1 = new GoogleStaticMarker("a", sMap.Center, Color.Blue, 'J', GoogleStaticMarkerSize.Mid);
sMap.Overlays.Add(m1);

GoogleStaticPolyline line = new GoogleStaticPolyline();
line.ID = "l1";
line.Opacity = 0.5f;
line.LineColor = Color.Red;
line.Width = 5;
line.Points.Add(sMap.Center);
line.Points.Add(new Reimers.Map.GoogleLatLng(55.7, 12.6));
sMap.Overlays.Add(line);

The classes necessary to create static maps are located in the Reimers.Map.Static namespace.

Latest Tweets