Google Maps API 3

CHAPTER 7 ■ INFOWINDOW TIPS AND TRICKS
That’s the three required properties that you always have to set. In this case, however, you’ll want to
set one more property. Since this will be a very small map, I don’t want it cluttered by the zoom and pan
control or by any other control. To get rid of those, you set the disableDefaultUI property to true. This
way, there will be no controls obscuring the view on the map.
var overviewOpts = {
zoom: 14,
center: marker.getPosition(),
mapTypeId: map.getMapTypeId(),
disableDefaultUI: true
};
Now you’re all set to initialize the detail map. You have a container for it, and you have defined its
properties. All that’s left to do is to create it.
var detailMap = new google.maps.Map(detailDiv, overviewOpts);
Now the map is created, but you also want a marker in it marking the spot.
First you set the position. Now, you can do this in one of two ways. You could get it from your newly
created detail map or from the clicked marker. In this example, I’ve chosen to get it from the latter.
Next you need to define what map the marker should be added to. In this case, it’s the newly created
detail map.
That’s it for the required properties, but I’m going to add one more property. Since you don’t want
this marker to be clickable, you want to somehow disable that. You can do this by setting the property
clickable to false. This way, the cursor won’t change when the user hovers with the mouse over it, and
the user can’t interact with it.
OK, you’re set to create the marker. Here’s the code to do that:
var detailMarker = new google.maps.Marker({
position: marker.getPosition(),
map: detailMap,
clickable: false
});
That’s it for the map. It has been created, and the marker has been added to it. But you still
can’t see anything if you try to click the marker. That’s because a crucial part is still missing, creating
the InfoWindow.
Creating the InfoWindow
First you check to see whether you already have an InfoWindow. If not, you create one.
if (!infoWindow) {
infoWindow = new google.maps.InfoWindow();
}
Next you’re going to set its content and then add it to the map. You probably know how to do this by
now, but I’ll explain it anyway. First you’ll set the content by using its setContent() method. Then you
call its open() method and pass a map object and a marker to it. The only thing you have to keep in mind
is to pass it the right map and the right marker. In this case, it’s the big map and the clicked marker.
148