Chapter 9: Using Overlays

infopanel.innerHTML = infopanel.innerHTML +
‘<a href=”#” onClick=”movemap(‘ + index + ‘);”>’ +
title +
‘
’;
index++;
}

function movemap(index) {
map.recenterOrPanToLatLng(points[index]);
}

The key to the example is the addmarker()function. The function performs two operations:

 It creates the marker, based on the supplied longitude (x) and latitude (y) and title. The

marker-creation process is three steps: create the point, create the marker, add the marker

to the overlay.


 It creates an HTML link that runs the movemap()function each time the name of the

marker is clicked. To achieve this, the document reference for the information window is

generated during the onLoad()function. HTML is then appended to the doc refer-

ence by updating the content of the innerHTMLproperty.

Each time a new point is created you add it to the global points array and then explicitly refer-
ence the index of that point into the HTML that is generated for each restaurant. That way,
when each restaurant is clicked, it loads the previously created point from the array and recen-
ters the map. The reason for using this method is that it reduces the amount of complex infor-
mation that is referenced in different areas of the system. By standardizing where the
information is kept, the application can also standardize how the information is referenced,
which will have more relevance as the complexity of the examples increases.

The example can be seen in action in Figure 9-1. The info window can be seen on the right.
Clicking the restaurant name recenters the map on the given marker. Clicking a marker does
nothing, for the moment.