First introduction to the Google Maps Javascript API

In this post I will talk about my experience in using the Google Maps JS API and its implementation in the mobile version of the site with a very large attendance.

Most recently, at work, I had to deal with the implementation of a module designed to search for site users within the current coordinates of the visitor (the site’s subject is dating, not shadowing, as you might think, I won’t give references and names so as not to reveal secrets and advertise). Initially, I ran into an existing module implementation. This version was written a year or two ago and used an outdated version of the API, so when I climbed into the documentation and tried to add something to this module, I naturally got errors.
After registering a free API Key, I updated the library used and began to study help.
I was very pleased with the possibility of creating my own map elements (Overlays), which, in fact, I had to do. I will give an example of using this feature:

function TestOverlay(bounds) { this._bounds = bounds; } TestOverlay.prototype = new GOverlay(); TestOverlay.prototype.initialize = function(map) { var div = document.createElement("div"); div.style.border = "2px solid #888888"; div.style.position = "absolute"; map.getPane(G_MAP_MAP_PANE).appendChild(div); this._map = map; this._div = div; } TestOverlay.prototype.remove = function() { this._div.parentNode.removeChild(this._div); } TestOverlay.prototype.copy = function() { return new Rectangle(this._bounds); } TestOverlay.prototype.redraw = function(force) { if (!force) return; var c1 = this._map.fromLatLngToDivPixel(this._bounds.getSouthWest()); var c2 = this._map.fromLatLngToDivPixel(this._bounds.getNorthEast()); this._div.style.width = Math.abs(c2.x - c1.x) + "px"; this._div.style.height = Math.abs(c2.y - c1.y) + "px"; this._div.style.left = (Math.min(c2.x, c1.x) - 2) + "px"; this._div.style.top = (Math.min(c2.y, c1.y) - 2) + "px"; } function initialize() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map_canvas")); map.setCenter(new GLatLng(37.4419, -122.1419), 13); map.addControl(new GSmallMapControl()); var bounds = map.getBounds(); var southWest = bounds.getSouthWest(); var northEast = bounds.getNorthEast(); var lngDelta = (northEast.lng() - southWest.lng()) / 3; var latDelta = (northEast.lat() - southWest.lat()) / 4; var rectBounds = new GLatLngBounds( new GLatLng(southWest.lat() + latDelta, southWest.lng() + lngDelta), new GLatLng(northEast.lat() - latDelta, northEast.lng() - lngDelta)); map.addOverlay(new TestOverlay(rectBounds)); } } ​ 

As you can see from this example, custom map elements are created by implementing the GOverlay interface. To implement this interface, you need to implement 4 of its methods - initialize, remove, copy and redraw.
In addition, very convenient and intuitive classes such as GPoint, GSize, GIcon are used to work with standard map elements. The latter, for example, allows you to set the size of the icon, add a shadow to the icon, and also set the point of contact for the icon with the map. All this is possible thanks to a very simple interface:

  var baseIcon = new GIcon(G_DEFAULT_ICON); baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png"; baseIcon.iconSize = new GSize(20, 34); baseIcon.shadowSize = new GSize(37, 34); baseIcon.iconAnchor = new GPoint(9, 34); 

The resulting module has become much more convenient and more interesting due to the use of more recent features of the Google Maps API.