Examples of Google Maps API №1: Create your own controls

So, I continue to make cross-posts from my blog . This time it will be about creating your own controls for maps based on the Google Maps API.

CREATE OWN CARD MANAGEMENT ELEMENTS

If you are not satisfied with the standard Google Maps map controls, then you can create your own using a code that is not very large in size. We will create zoom control buttons and map type switching buttons (regular and satellite).
First, we set the minimum and maximum zoom levels:

/ * Maximum and minimum zoom * /
var zoom_max = 10;
var zoom_min = 7;

Now let's declare the function, the prototype of which will be responsible, in fact, for the decrease / increase buttons:

/ * Function declaration * /
function TextualZoomControl () {
}

Then we apply the initialize() method to the prototype, which means our controls are created. This prototype is initialized as an object of the GControl() class:

/ * Create divs into which we place controls. One block for each element. * /
TextualZoomControl.prototype = new GControl ();
/ * Initialize the prototype * /
TextualZoomControl.prototype.initialize = function (map) {
/ * Create a container for buttons * /
var container = document .createElement ( "div" );
/ * Create the first button * /
var zoomInDiv = document .createElement ( "div" );
this .setButtonStyle_ (zoomInDiv);
container.appendChild (zoomInDiv);
/ * Enter the name * /
zoomInDiv.appendChild ( document .createTextNode ( "Zoom" ));
/ * If the zoom level is exceeded, then display the message * /
GEvent.addDomListener (zoomInDiv, "click" , function () {
map.zoomIn ();
if (map.getZoom ()> zoom_max) {
map.setZoom (zoom_max);
alert ( "Where even more, then ?!" );
}
});
/ * Create a second button * /
var zoomOutDiv = document .createElement ( "div" );
this .setButtonStyle_ (zoomOutDiv);
container.appendChild (zoomOutDiv);
/ * Enter the name * /
zoomOutDiv.appendChild ( document .createTextNode ( "Reduce" ));
/ * If the zoom level is lowered, then we display a message * /
GEvent.addDomListener (zoomOutDiv, "click" , function () {
map.zoomOut ();
if (map.getZoom () <zoom_min) {
map.setZoom (zoom_min);
alert ( "And so everything is perfectly clear!" );
}
});
map.getContainer (). appendChild (container);
return container;
}

Set the position of the container with the buttons using the getDefaultPosition() method. In this case, the position is set relative to the upper left corner of the map; indents are 7 pixels:

/ * Set the position of controls relative to the map * /
TextualZoomControl.prototype.getDefaultPosition = function () {
return new GControlPosition (G_ANCHOR_TOP_LEFT, new GSize (7, 7));
}

And, as a final touch, we customize the appearance of the buttons we created. For this we use the setButtonStyle_() method:

/ * Set styles for elements * /
TextualZoomControl.prototype.setButtonStyle_ = function (button) {
button.style.textDecoration = "underline"
button.style.color = "# 000"
button.style.backgroundColor = "#fff"
button.style.font = "small Arial"
button.style.fontWeight = "bolder"
button.style.border = "1px solid black"
button.style.padding = "2px"
button.style.marginBottom = "3px"
button.style.textAlign = "center"
button.style.width = "6em"
button.style.cursor = "pointer"
}

And here is the code illustrating the creation of buttons responsible for changing the type of card:

/ * The function of creating controls to change the type of map * /
function MapTypeControl () {
}
MapTypeControl.prototype = new GControl ();
/ * Create divs into which we place controls. One block for each element. * /
MapTypeControl.prototype.initialize = function (map) {
var container = document .createElement ( "div" );
var normalDiv = document .createElement ( "div" );
this .setButtonStyle_ (normalDiv);
container.appendChild (normalDiv);
normalDiv.appendChild ( document .createTextNode ( "Map" ));
GEvent.addDomListener (normalDiv, "click" , function () {
map.setMapType (G_NORMAL_MAP);
});
var satelliteDiv = document .createElement ( "div" );
this .setButtonStyle_ (satelliteDiv);
container.appendChild (satelliteDiv);
satelliteDiv.appendChild ( document .createTextNode ( "Satellite" ));
GEvent.addDomListener (satelliteDiv, "click" , function () {
map.setMapType (G_SATELLITE_MAP);
});
map.getContainer (). appendChild (container);
return container;
}
/ * Set the position of controls relative to the map * /
MapTypeControl.prototype.getDefaultPosition = function () {
return new GControlPosition (G_ANCHOR_TOP_RIGHT, new GSize (7, 7));
}
/ * Set styles for elements * /
MapTypeControl.prototype.setButtonStyle_ = function (button) {
button.style.textDecoration = "underline"
button.style.color = "# 000"
button.style.backgroundColor = "#fff"
button.style.font = "small Arial"
button.style.fontWeight = "bolder"
button.style.border = "1px solid black"
button.style.padding = "2px"
button.style.marginBottom = "3px"
button.style.textAlign = "center"
button.style.width = "6em"
button.style.cursor = "pointer"
}

Now we need to attach all this to the map:

/ * Map download function * /
function init () {
if (GBrowserIsCompatible ()) {
/ * Place the map in a div with id = ”map” * /
map = new GMap2 ( document .getElementById ( "map" ));
/ * Connect the zoom control buttons * /
map.addControl ( new TextualZoomControl ());
/ * Connect the control buttons for changing the card type * /
map.addControl ( new MapTypeControl ());
/ * Set the center of the map * /
map.setCenter ( new GLatLng (37.4419, -122.1419), 13);
}
}

/ * Initialize the card * /
window.onload = init;
window.onunload = GUnload;

And the entire JavaScript code is:

var zoom_max = 10;
var zoom_min = 7;
function TextualZoomControl () {
}
TextualZoomControl.prototype = new GControl ();
TextualZoomControl.prototype.initialize = function (map) {
var container = document .createElement ( "div" );
var zoomInDiv = document .createElement ( "div" );
this .setButtonStyle_ (zoomInDiv);
container.appendChild (zoomInDiv);
zoomInDiv.appendChild ( document .createTextNode ( "Zoom" ));
GEvent.addDomListener (zoomInDiv, "click" , function () {
map.zoomIn ();
if (map.getZoom ()> zoom_max) {
map.setZoom (zoom_max);
alert ( "Where even more, then ?!" );
}
});
var zoomOutDiv = document .createElement ( "div" );
this .setButtonStyle_ (zoomOutDiv);
container.appendChild (zoomOutDiv);
/ * Enter the name * /
zoomOutDiv.appendChild ( document .createTextNode ( "Reduce" ));
/ * If the zoom level is lowered, then we display a message * /
GEvent.addDomListener (zoomOutDiv, "click" , function () {
map.zoomOut ();
if (map.getZoom () <zoom_min) {
map.setZoom (zoom_min);
alert ( "The edge is already visible, in full view!" );
}
});
map.getContainer (). appendChild (container);
return container;
}
TextualZoomControl.prototype.getDefaultPosition = function () {
return new GControlPosition (G_ANCHOR_TOP_LEFT, new GSize (7, 7));
}
TextualZoomControl.prototype.setButtonStyle_ = function (button) {
button.style.textDecoration = "underline"
button.style.color = "# 000"
button.style.backgroundColor = "#fff"
button.style.font = "small Arial"
button.style.fontWeight = "bolder"
button.style.border = "1px solid black"
button.style.padding = "2px"
button.style.marginBottom = "3px"
button.style.textAlign = "center"
button.style.width = "6em"
button.style.cursor = "pointer"
}
function MapTypeControl () {
}
MapTypeControl.prototype = new GControl ();
MapTypeControl.prototype.initialize = function (map) {
var container = document .createElement ( "div" );
var normalDiv = document .createElement ( "div" );
this .setButtonStyle_ (normalDiv);
container.appendChild (normalDiv);
normalDiv.appendChild ( document .createTextNode ( "Map" ));
GEvent.addDomListener (normalDiv, "click" , function () {
map.setMapType (G_NORMAL_MAP);
});
var satelliteDiv = document .createElement ( "div" );
this .setButtonStyle_ (satelliteDiv);
container.appendChild (satelliteDiv);
satelliteDiv.appendChild ( document .createTextNode ( "Satellite" ));
GEvent.addDomListener (satelliteDiv, "click" , function () {
map.setMapType (G_SATELLITE_MAP);
});
map.getContainer (). appendChild (container);
return container;
}
MapTypeControl.prototype.getDefaultPosition = function () {
return new GControlPosition (G_ANCHOR_TOP_RIGHT, new GSize (7, 7));
}
MapTypeControl.prototype.setButtonStyle_ = function (button) {
button.style.textDecoration = "underline"
button.style.color = "# 000"
button.style.backgroundColor = "#fff"
button.style.font = "small Arial"
button.style.fontWeight = "bolder"
button.style.border = "1px solid black"
button.style.padding = "2px"
button.style.marginBottom = "3px"
button.style.textAlign = "center"
button.style.width = "6em"
button.style.cursor = "pointer"
}
function init () {
if (GBrowserIsCompatible ()) {
map = new GMap2 ( document .getElementById ( "map" ));
map.addControl ( new TextualZoomControl ());
map.addControl ( new MapTypeControl ());
map.setCenter ( new GLatLng (37.4419, -122.1419), 13);
}
}
window.onload = init;
window.onunload = GUnload;

Many examples with descriptions in English can be found here . And the working example described in this article is here .