Google Maps API 3

CHAPTER 7 ■ INFOWINDOW TIPS AND TRICKS
};
})();
});
var overviewOpts = {
zoom: 14,
center: marker.getPosition(),
mapTypeId: map.getMapTypeId(),
disableDefaultUI: true
};
var detailMap = new google.maps.Map(detailDiv, overviewOpts);
// Create a marker that will show in the detail map
var detailMarker = new google.maps.Marker({
position: marker.getPosition(),
map: detailMap,
clickable: false
});
// Check to see if an InfoWindow already exists
if (!infoWindow) {
infoWindow = new google.maps.InfoWindow();
}
// Setting the content of the InfoWindow to the detail map
infoWindow.setContent(detailDiv);
// Opening the InfoWindow
infoWindow.open(map, marker);
Creating a Zoom-In Link
Sometimes you can provide users with shortcuts to make the user experience more pleasurable. One
simple shortcut is to provide a zoom-in link in the InfoWindow. This way, the user can easily zoom in on
an object without having to use the zoom controls.
In this example, you will use the marker centered on Manhattan. Initially the map is zoomed out so
all the United States is visible. When the zoom-in link in the InfoWindow is clicked, the map zooms in on
the marker. See Figure 7-8.
150