Examples of Google Maps API №3: Making the info-window functional

So for now the last article with examples. It will be a question of how to make the info-window more functional.

WE MAKE INFO-WINDOW FUNCTIONAL

Displaying any information about the place where the marker is installed is, of course, good. But let's add some functionality to our window. The idea is this: in addition to some information in the info-window there will be two buttons - “Larger” and “To the Center”. The “Larger” button increases the current zoom level by several points, and the “To the Center” button returns us to the center of the map with the initial zoom level.
So, the first line of the code will contain the coordinates of the center of the map and the initial zoom level, as well as the map variable:

var center_lat = 37.4419, center_lng = -122.1419, start_zoom = 13, map;

Then comes the function for which the “Larger” button is responsible:

function to_zoom () {
map.zoomIn ();
map.zoomIn ();
map.zoomIn ();
}

As you can see from the example, the value of the current zoom value is increased by 3 points.
Next comes the function for which the “To Center” button is responsible:

function to_center () {
map.closeInfoWindow ();
map.setCenter ( new GLatLng (center_lat, center_long), start_zoom);
}

This function closes the called info-window, sets the zoom level to the initial value and returns us to the center of the map.
And here is the main function of our init() map in which we initialize the map variable as an object of the GMap2() class GMap2() , add controls to the map, set a marker on the map, and make it clickable. And here is the code:

function init () {
if (GBrowserIsCompatible ()) {
map = new GMap2 ( document .getElementById ( "map" ));
map.addControl ( new GLargeMapControl ());
map.addControl ( new GMapTypeControl ());
map.setCenter ( new GLatLng (center_lat, center_long), start_zoom);
var latlng = new GLatLng (center_lat, center_long);
var marker = new GMarker (latlng, G_DEFAULT_ICON, {title: 'Marker' });
map.addOverlay (marker);
var html = "Some information will be located here." + "<br \/> <center> <a href=\"javascript:to_zoom();\"" Larger </a> | <a href== a> <\ / center> <br \ /> " ;
marker.openInfoWindowHtml (html);
}
}

And all ends with these two lines:

window.onload = init;
window.onunload = GUnload;

And, of course, a working example is here .