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?