Google Maps: change color on subset of markers -
<!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>google maps multiple markers</title> <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script> </head> <body> <div id="map" style="width: 600px; height: 800px;"></div> <script type="text/javascript"> var locations = [ ['address 1', latitude coordinate, longitude coordinate, 1], ['address 2', latitude coordinate, longitude coordinate, 2], ['address 3', latitude coordinate, longitude coordinate, 3], ... ['address 58', latitude coordinate, longitude coordinate, 58], ['address 59', latitude coordinate, longitude coordinate, 59], ['address 60', latitude coordinate, longitude coordinate, 60], , ]; var map = new google.maps.map(document.getelementbyid('map'), { zoom: 10, center: new google.maps.latlng(47.594, -122.249), maptypeid: google.maps.maptypeid.roadmap }); var infowindow = new google.maps.infowindow(); var marker, i; (i = 0; < locations.length; i++) { marker = new google.maps.marker({ position: new google.maps.latlng(locations[i][1], locations[i][2]), map: map }); google.maps.event.addlistener(marker, 'click', (function(marker, i) { return function() { infowindow.setcontent(locations[i][0]); infowindow.open(map, marker); } })(marker, i)); } </script> </body> </html> q (1): can addresses 1-5 have green pin/marker while addresses 6-60 remain default red pin/marker?
able change pins green, yellow, etc. using,
marker = new google.maps.marker({ icon: 'http://...' }); however changes rather select few (of pins/markers).
in google maps api v3 utilize seticon function of google.maps.marker class set marker icon.
example
var locations = [ ['interfaith medical center', 40.67836, -73.937781, 1], ['kingsbrook jewish medical center', 40.65935, -73.933232, 2], ['kingsboro psychiatric center', 40.656192, -73.937523, 3], ['kings county hospital center', 40.657201, -73.944647, 4], ['university hospital of brooklyn', 40.655378, -73.945763, 5], ['new york methodist hospital', 40.667098, -73.978336, 6], ['brookdale university hospital , medical center', 40.655411, -73.912418, 7], ['wyckoff heights medical center', 40.704148, -73.917607, 8], ['woodhull medical center', 40.698731, -73.942759, 9], ['the brooklyn hospital center', 40.690206, -73.97825, 10] ]; var map = new google.maps.map(document.getelementbyid('map'), { zoom: 12, center: new google.maps.latlng(40.67836, -73.937781), maptypeid: google.maps.maptypeid.roadmap }); var infowindow = new google.maps.infowindow(); var marker, i; (i = 0; < locations.length; i++) { marker = new google.maps.marker({ position: new google.maps.latlng(locations[i][1], locations[i][2]), map: map }); if (i < 5) { //set marker icon green first 5 markers marker.seticon('http://maps.google.com/mapfiles/ms/icons/green-dot.png'); } google.maps.event.addlistener(marker, 'click', (function (marker, i) { return function () { infowindow.setcontent(locations[i][0]); infowindow.open(map, marker); } })(marker, i)); }<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script> <div id="map" style="width: 600px; height: 480px;"></div>
Comments
Post a Comment