Integrating google maps

Google maps is an excellent tool for mapping and now we will integrate it into our site thanks to the open API. We will integrate not only a fixed position but also an arbitrary one, namely, we will create a “locations” table in the database, we will enter the title, x, y fields there.

Now we need to edit each location. Create a canvas where the map will be displayed.
<div id="map" style="width: 250px; height: 250px"> </div>

Next - fasten the library call from google. Since I use smarty, I give the developer key as a variable.
<script src="http://maps.google.com/maps?file=api&v=2&key={$google_maps_hash}" type="text/javascript"></script>


Now let's make a function that will do all the different work - create a map in our div element, position it according to the given coordinates, set the bubble. If we edit these coordinates, then the function will, by feedback, write to the hidden input fields of some form “registration_form” new coordinates of the transferred pin-pointer.
<script type="text/javascript">
function load_map(x,y,title) {

if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(x, y), 13);
map.enableScrollWheelZoom();

point = new GLatLng(x, y);
marker = new GMarker(point);

map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.addOverlay(marker);
marker.openInfoWindowHtml(title);
/*
var mgr = new GMarkerManager(map);

GEvent.addListener(marker, "dragend", function() {
//var center = map.getCenter();
var strCenter=marker.getPoint();
marker.openInfoWindowHtml(document.forms['registration_form'].title.value);
document.forms['registration_form'].geo_x.value=strCenter.lat();//arrCenter[0];
document.forms['registration_form'].geo_y.value=strCenter.lng();//arrCenter[1];

});
*/
}
}
</script>