I recently had the need for printing a Google maps static image map in a Silverlight application. It needed to actually be embedded in the Silverlight app to take advantage of the Silverlight 4 printing library (a topic I will touch on later). I wrote an API to make it easy to do pretty much every thing that the Google static API allows you to do. Here’s a quick demo of what the results look like in silverlight:

Digging in

All of the previous examples are pretty much taken directly from the google static maps API examples just so you can see them working in silverlight. You can download this project and try it for yourself here. I won’t walk through every example but here’s a few:

<my:GoogleStaticMap HorizontalAlignment="Left" Margin="204,1,0,0" x:Name="googleStaticMap1" VerticalAlignment="Top" Height="281" Width="308" />

            // Example 1
            googleStaticMap1.GoogleMapType = GoogleStaticMap.MapType.RoadMap;
            googleStaticMap1.Center = new GoogleStaticMap.location() { address = "Berkeley,CA" };
            googleStaticMap1.Zoom = 14;

This is the most basic example. Basically you drag/drop the control onto your XAML page and size it the way you wish. If you go beyond 640/640 though the image won’t stretch beyond that as this is a limitation from google.

// Example 5
            googleStaticMap5.Markers.Add(new GoogleStaticMap.Marker() { Color = "blue", Label = 'S', Locations = new GoogleStaticMap.location() { latitude = 62.107733, longitude = -145.541936 } });
            googleStaticMap5.Markers.Add(new GoogleStaticMap.Marker() { Color = "green", Label = 'P', Locations = new GoogleStaticMap.location() { address = "Delta+Junction,AK" } });
            googleStaticMap5.GoogleMapType = GoogleStaticMap.MapType.Terrain;
            googleStaticMap5.Center = new GoogleStaticMap.location() { latitude = 63.259591, longitude = -144.667969 };
            googleStaticMap5.Zoom = 6;

This example shows how to add multiple markers on your map. The markers class is an internal class to the control. The control property ‘Markers’ expects a ‘List’ of ‘Marker’ objects to be drawn on the map. Keep in mind the Label can only be one character as this is also a Google Maps limitation.

// Example 7
            List<GoogleStaticMap.location> path_locations1 = new List<GoogleStaticMap.location>();
            path_locations1.Add(new GoogleStaticMap.location() { address = "8th+Avenue+%26+34th+St,New+York,NY" });
            path_locations1.Add(new GoogleStaticMap.location() { address = "8th+Avenue+%26+42nd+St,New+York,NY" });
            path_locations1.Add(new GoogleStaticMap.location() { address = "Park+Ave+%26+42nd+St,New+York,NY,NY" });
            path_locations1.Add(new GoogleStaticMap.location() { address = "Park+Ave+%26+34th+St,New+York,NY,NY" });
            googleStaticMap7.Paths.Add(new GoogleStaticMap.Path() { weight = 2, color = "0x0000ff", fillcolor = "0x0000ff", Locations = path_locations1 });
            googleStaticMap7.GoogleMapType = GoogleStaticMap.MapType.RoadMap;
            googleStaticMap7.Zoom = 14;

This example shows how to draw and fill in a path. To do this you will need to create a locations List (List) and add as many points as you wish, then pass this into the Locations property of the Path object. Note how locations, throughout these examples, can accept ‘Address’ or ‘Latitude/Longitude’. Also, check out the documentation on Google Static Maps to find out more about what are acceptable colors for the paths and markers.

One last thing to note, I’ve shown these examples separately just for demo purposes but you can inter mix each of these techniques. So you could have multiple paths along with markers etc.

Download Demo Project

Tags: Google Map, Silverlight

This entry was posted on Wednesday, June 23rd, 2010 at 11:54 am and is filed under Silverlight. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.