Can someone please help me how to bind a custom image marker to this script?
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&v=3"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js"></script>
<script type="text/javascript" src="scripts/downloadxml.js"></script>
<style type="text/css">
html, body { height: 100%; }
</style>
<script type="text/javascript">
//<![CDATA[
// this variable will collect the html which will eventually be placed in the side_bar
var side_bar_html = "";
// arrays to hold copies of the markers and html used by the side_bar
// because the function closure trick doesnt work there
var gmarkers = [];
// global "map" variable
var map = null;
var markerclusterer = null;
// A function to create the marker and set up the event window function
function createMarker(latlng, name, html) {
var contentString = html;
var marker = new google.maps.Marker({
position: latlng,
// map: map,
zIndex: Math.round(latlng.lat()*-100000)<<5
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map,marker);
});
// save the info we need to use later for the side_bar
gmarkers.push(marker);
// add a line to the side_bar html
side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + name + '<\/a><br>';
}
// This function picks up the click and opens the corresponding info window
function myclick(i) {
google.maps.event.trigger(gmarkers[i], "click");
}
function initialize() {
// create the map
var myOptions = {
zoom: 7,
center: new google.maps.LatLng(52.13263,5.29127),
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
// Read the data from example.xml
downloadUrl("dataxml.cfm", function(doc) {
var xmlDoc = xmlParse(doc);
var markers = xmlDoc.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
// obtain the attribues of each marker
var lat = parseFloat(markers[i].getAttribute("lat"));
var lng = parseFloat(markers[i].getAttribute("lng"));
var marker_image = parseFloat(markers[i].getAttribute("markerimage"));
var image = {
url: marker_image,
size: new google.maps.Size(71, 132),
origin: new google.maps.Point(0, 0),
scaledSize: new google.maps.Size(71, 132)
};
var point = new google.maps.LatLng(lat,lng);
var id = markers[i].getAttribute("id");
var country = markers[i].getAttribute("country");
var html="<b>"+country+"</b><br><span style='color:white'>"+id+"</span>";
// create the marker
var marker = createMarker(point,country+" "+id,html);
}
markerCluster = new MarkerClusterer(map, gmarkers);
});
}
var infowindow = new google.maps.InfoWindow(
{
size: new google.maps.Size(150,50)
});
// This Javascript is based on code provided by the
// Community Church Javascript Team
// http://www.bisphamchurch.org.uk/
// http://econym.org.uk/gmap/
// from the v2 tutorial page at:
// http://econym.org.uk/gmap/basic3.htm
//]]>
</script>
</head>
<body style="margin:0px; padding:0px;" onload="initialize()">
<div id="map_canvas" style="width: 752px; height: 600px"></div>
</body>
</html>
The XML is simple:
<markers>
<marker markerimage="https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png" id="value" lat="value" lng="value" country="value" />
I have tried to add "icon: image" to the create marker part, but I can't figured it out.I have tried to add "icon: image" to the create marker part, but I can't figured it out.
You need to pass the custom icon into the createMarker function:
// create the marker
var marker = createMarker(point, country + " " + id, html, marker_image);
updated createMarker function:
// A function to create the marker and set up the event window function
function createMarker(latlng, name, html, icon) {
var contentString = html;
var marker = new google.maps.Marker({
position: latlng,
icon: icon,
// map: map,
zIndex: Math.round(latlng.lat() * -100000) << 5
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map, marker);
});
// save the info we need to use later for the side_bar
gmarkers.push(marker);
// add a line to the side_bar html
side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length - 1) + ')">' + name + '<\/a><br>';
}
code snippet:
function initialize() {
map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(40.735657, -74.1723667),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
// Read the data from dataxml.cfm
// downloadUrl("dataxml.cfm", function(doc) {
var xmlDoc = xmlParse(xmlData);
var markers = xmlDoc.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
// obtain the attribues of each marker
var lat = parseFloat(markers[i].getAttribute("lat"));
var lng = parseFloat(markers[i].getAttribute("lng"));
var marker_image = markers[i].getAttribute("markerimage");
var image = {
url: marker_image,
size: new google.maps.Size(71, 132),
origin: new google.maps.Point(0, 0),
scaledSize: new google.maps.Size(71, 132)
};
var point = new google.maps.LatLng(lat, lng);
var id = markers[i].getAttribute("id");
var country = markers[i].getAttribute("country");
var html = "<b>" + country + "</b><br><span style='color:blue'>" + id + "</span>";
// create the marker
var marker = createMarker(point, country + " " + id, html, marker_image);
}
markerCluster = new MarkerClusterer(map, gmarkers);
// });
}
var infowindow = new google.maps.InfoWindow({
size: new google.maps.Size(150, 50)
});
// A function to create the marker and set up the event window function
function createMarker(latlng, name, html, icon) {
var contentString = html;
var marker = new google.maps.Marker({
position: latlng,
icon: icon,
zIndex: Math.round(latlng.lat() * -100000) << 5
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map, marker);
});
// save the info we need to use later for the side_bar
gmarkers.push(marker);
// add a line to the side_bar html
side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length - 1) + ')">' + name + '<\/a><br>';
}
// global variables
var side_bar_html = "";
var gmarkers = [];
var map = null;
var markerclusterer = null;
// This function picks up the click and opens the corresponding info window
function myclick(i) {
google.maps.event.trigger(gmarkers[i], "click");
}
google.maps.event.addDomListener(window, "load", initialize);
//New York, NY, USA (40.7127837, -74.0059413
//Newark, NJ, USA (40.735657, -74.1723667)
var xmlData = '<markers><marker markerimage="https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png" id="NYC" lat="40.7127837" lng="-74.0059413" country="USA" /><marker markerimage="https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png" id="NWK" lat="40.735657" lng="-74.1723667" country="USA" /></markers>';
function xmlParse(str) {
if (typeof ActiveXObject != 'undefined' && typeof GetObject != 'undefined') {
var doc = new ActiveXObject('Microsoft.XMLDOM');
doc.loadXML(str);
return doc;
}
if (typeof DOMParser != 'undefined') {
return (new DOMParser()).parseFromString(str, 'text/xml');
}
return createElement('div', null);
}html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js"></script>
<div id="map_canvas"></div>