views:

21

answers:

0

I have a big list of markers (pinpoints) stored in an XML file and am using markerManager to load these on a google map. I'm having some difficulty understanding how I style to marker. I understand that you can add some simple css to a marker like:

<div style="width: 200px; height: 100px;"></div>

but don't know how to integrate that with my code. I certainly want to keep it out of the XML file if at all possible.

This is the script I'm using to create the map points:

    var gmap = null;

function initialize() {
   gmap = new GMap2(document.getElementById('gmap'));
   gmap.addMapType(G_NORMAL_MAP);
   gmap.addMapType(G_SATELLITE_MAP);
   gmap.addMapType(G_PHYSICAL_MAP);
   gmap.addControl(new GMapTypeControl());
   gmap.addControl(new GLargeMapControl());
   gmap.setCenter(new GLatLng(44.964798, -93.295898), 8);
   gmap.enableScrollWheelZoom();

    }

function addMarkersFromXML(){
   var batch = [];
   mgr = new MarkerManager(gmap);



   var request = GXmlHttp.create();
   request.open('GET', '/clients.xml', true);
   request.onreadystatechange = function() {
   if (request.readyState == 4) {
    var xmlDoc = request.responseXML;
    var markers = xmlDoc.documentElement.getElementsByTagName("client");

    for (var i = 0; i < markers.length; i++) {
        var point = new GLatLng(parseFloat(markers[i].getAttribute("latitude")), parseFloat(markers[i].getAttribute("longitude")));
        var latitude = markers[i].getAttribute("latitude")
        var longitude = markers[i].getAttribute("longitude")
        var addr = markers[i].getAttribute("address");

        var marker = createMarker(point,addr);
        batch.push(marker);
    }

    mgr.addMarkers(batch,0);
    mgr.refresh();

}
    }
request.send(null);
}


function createMarker(point,html) {
    var marker = new GMarker(point);
    GEvent.addListener(marker, "click", function() {
        marker.openInfoWindowHtml(html);
    });

    return marker;
}
</script> 

The xml file is styled like this:

<clients>
  <client address="555 Main Street" Latitude="44.7463900" longitude="-93.3738000" />
</clients>

Is there an easy way to integrate some style into JS for the marker?