Geolocation and Mapping - HTML5 with Visual Studio 2012 - page 288

var restrooms = [
{ lat: 37.810079, long: -122.410806 },
{ lat: 37.809079, long: -122.410206 },
{ lat: 37.811279, long: -122.410446 }
];

4. Add the following code to the showLocation() function just before creating the map

object. This will override your current location to be near where the restrooms are.

// Override these for testing purposes
lat = 37.811079;
long = −122.410546;

5. Add the following functions to the end of the script element. The

markRestrooms() function iterates through this array, calling the
markRestroom() function for each. The markRestroom() function adds a single
pushpin. This first creates an options collection that defines the image file to use as
well as the size of the image. This is passed in when creating the Pushpin object.

function markRestrooms() {
for (var i in restrooms) {
markRestroom(restrooms[i].lat, restrooms[i].long);
}
}

function markRestroom(lat, long) {
var pushpinOptions = {icon: '/Images/restroom.gif', width: 35, height: 35 };
var pushpin = new Microsoft.Maps.Pushpin
(new Microsoft.Maps.Location(lat, long), pushpinOptions);
map.entities.push(pushpin);
}

6. Add this function call at the end of the showlocation() function to display the

additional pushpins.

// Display the restroom locations
markRestrooms();

7. Press F5 to debug the application. You should now see pushpins where the

restrooms are located as shown in Figure 12-11 .