Using Google Map API you can create a personalized map which can be easily integrated in any web application.

The process consists in 2 major steps:
1. Create a map with a default view, controls and center coordinates
2. Populating the map with different overlays

Our example:
MonALISA Repository for ALICE

1. Creating the map
In our case we needed a map with a default satellite view.

//Create the map. Your page must contain a div with the id “map”
map = new GMap2(document.getElementById(“map”));
//Setting the center coordinates of the map and the zoom, in this case the center is chosen by the user
map.setCenter(new GLatLng(centers[continent]["lat"], centers[continent]["long"]), centers[continent]["zoom"]);
//Adding the large zoom control
map.addControl(new GLargeMapControl());
//Adding the type control that allows to switch between the satellite, map and hybrid view
map.addControl(new GMapTypeControl());
//Adding the control that allows to see the scale
map.addControl(new GScaleControl());
//Setting the default view to Satellite
map.setMapType(G_SATELLITE_MAP);
//Enabling the scroll zoom (for >2.78 versions)
map.enableScrollWheelZoom();
//Enabling the zoom on doubleclick event
map.enableDoubleClickZoom();

In order for this code to work the html source of the map must contain a div with the id “map”.

Now we have the map, the next step is to add the overlays (GMarkers and Polylines).

2. Populating the map with markers and lines
After creating the map we will add labeled markers and lines according to the information stored in a database.
The information about the markers and lines(latitude, longitude, labels etc) is provided through an asyncron request to a xml file.


GDownloadUrl(“map_data.jsp”, function(data, responseCode){
    //DRAW_MARKERS_AND_LINES
    var xml = GXml.parse(data);

    //getting the information about markers
    var markers = xml.documentElement.getElementsByTagName(“marker”);
    //draw markers ….
    //…………………………
    //getting the information about the lines
    var lines = xml.documentElement.getElementsByTagName(“line”);
    //draw the lines
    //……………………..
});

The xml format for a marker:
<marker lat=”57.014355″ lng=”9.988053″
html=”html source”
label=”Aalborg” image=”http://labs.google.com/ridefinder/images/mm_20_red.png”
title=”Aalborg”
abbr=”Aalborg”
link=”/display?page=jobs_per_site&SiteBase=Aalborg”
labelx=”5″ labely=”-25″ iconx=”4″ icony=”0″
/>

- lat & lng : coordinates of the marker
- html : the source for the html that will appear on the click event using marker.openInfoWindowHtml(“html source”)
- image : the image source for the marker icon
- label : the marker label
- labelx, labely : coordinates of the label used when the markers are to close
- iconx, icony : coordinates of the icon used when the markers are to close

The format for a line

<line colour=”#50A7FF” width=”3″ >
<point lat=”38.517″ lng=”15.1″ />
<point lat=”44.5″ lng=”11.333″ />
</line>

The form of the xml can be changed to answer the requirements of the application. In case extra information must be passed to the script all you have to do is to add a atribute to the marker or line tag.

2.1 Creating the LabeledMarkers
The information is read by the script through getAttribute method.

var batch = [];
var batch1 = [];

for (var i = 0; i < markers.length; i++) {
  // obtain the attribues of each marker
  var lat = markers[i].getAttribute("lat");
  var lng = markers[i].getAttribute("lng");
  var html = markers[i].getAttribute("html");
  var abbr = markers[i].getAttribute("abbr");
  var name = markers[i].getAttribute("name");
  var image = markers[i].getAttribute("image");
  var link = markers[i].getAttribute("link")
  var labelx = markers[i].getAttribute("labelx")
  var labely = markers[i].getAttribute("labely")
  var iconx = markers[i].getAttribute("iconx")
  var icony = markers[i].getAttribute("icony")

  //create the marker using this information
  var vMarker = {'abbr' : abbr, 'name': name, 'label' : html, 'latitude' : lat, 'longitude': lng,
    'image': image, 'link': link, 'labelx': labelx, 'labely': labely, 'iconx' : iconx, 'icony': icony};

  lng = parseFloat(lng);
  lat = parseFloat(lat);

  batch.push(createLabeledMarker(vMarker));
  batch1.push(createMarker(vMarker));

}
Because we want to show different markers for different zoom levels we must use GMarkerManager, which allows us to register sets of markers for different levels of zoom.

//for zoom level 4
manager.addMarkers(batch, 4);
//for zoom level 1
manager.addMarkers(batch1, 1);

manager.refresh();

Standard google api doesn’t offer the support for labeled markers. After googling the internet for a solution I’ve found an extension to GMarker, LabeledMarker:
http://googlemapsbook.com/2007/01/22/extending-gmarker/

The labeled marker acts on 2 events : the click event and doubleclick event.
- on click event an overlib window with the html defined in the xml is showed
- on doubleclick event a new window is opened with the information about the site that the marker was pointing to.

There is a small problem that effects the 2 events.
The marker interprets the doubleclick as 2 separated clicks and the first click triggers the click event, to show the overlib. To fix that you must delay the display of the overlib or to create an array of setTimeouts. When the click event occurs the callback function in pushed into the array with a delay of 250 milliseconds. Then, when the double-click event is fired, we call clearTimeout on the last two entries of that array, effectively canceling the click events.
This solution was offered by jgeerdes from google api group :
Google Maps API group

The LabeledMarkers are created by a function that is used to personalize the marker with the information extracted from the xml file.

function createLabeledMarker(pointData) {
  var latlng = new GLatLng(pointData["latitude"], pointData["longitude"]);
  var icon = new GIcon(false, pointData["image"]);

  icon.iconSize = new GSize(12, 20);
  //adjust the position of the icon, this depends on the application
  icon.iconAnchor = new GPoint(6-parseInt(pointData["iconx"]), 20-parseInt(pointData["icony"]));
  icon.infoWindowAnchor = new GPoint(25, 7);

  opts = {
    “icon”: icon,
    “clickable”: true,
    “draggable”: false,
    “labelText”: pointData["abbr"],
    “labelOffset”: new GSize(parseInt(pointData["labelx"])+parseInt(pointData["iconx"]), parseInt(pointData["labely"])+parseInt(pointData["icon
  };

  var marker = new LabeledMarker(latlng, opts);

  var timeouts = [];

  GEvent.addListener(marker, “click”, function() {
    timeouts.push(setTimeout( function(){marker.openInfoWindowHtml(pointData["label"])}, 250));
});

  GEvent.addListener(marker, “dblclick”, function(){
    for(var i=timeouts.length-2;i       clearTimeout(timeouts[i]);

    window.open(pointData["link"], "window_"+pointData["label"]);

  });
return marker;
}

2.2 Creating the Polylines
To add the lines to the map all we have to do is to read the information from the xml file and to create the Polyline objects.

// ========= Now process the polylines ===========
var lines = xml.documentElement.getElementsByTagName(“line_xrootd”);
// read each line

for (var a = 0; a < lines.length; a++) {
  //get any line attributes : color and width
  var colour = lines[a].getAttribute("colour");
  var width = parseFloat(lines[a].getAttribute("width"));

  // read each point on that line
  var points = lines[a].getElementsByTagName("point");
  var pts = [];

  for (var i = 0; i < points.length; i++) {
    pts[i] = new GLatLng(parseFloat(points[i].getAttribute("lat")), parseFloat(points[i].getAttribute("lng")));
  }

  adding a line as a overlay
  map.addOverlay(new GPolyline(pts,colour,width));
}

Useful links:
Google Maps API
Extending a GMarker : Labeled Marker
Google Maps API Group Discussion