HTML and CSS Reference
In-Depth Information
var restrooms = [
{ lat: 37.810079, long: -122.410806 },
{ lat: 37.809079, long: -122.410206 },
{ lat: 37.811279, long: -122.410446 }
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;
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);
Add this function call at the end of the showlocation() function to display the
additional pushpins.
// Display the restroom locations
Press F5 to debug the application. You should now see pushpins where the
restrooms are located as shown in Figure 12-11 .
Search WWH ::

Custom Search