Hello,
I am stumped at how to display two different types of markers.
Example: I have a map displaying homes for sale(green markers), no problem.
I would like to display sold homes (red markers) at the same time.
how do I differentiate the two types?
here is the code:
<script type="text/javascript"> <cfoutput> function LoadMap() { var locations = new Array( #REReplace(str, ",$", "")# ); var markers = new Array() var mapOptions = { center: new google.maps.LatLng(49.3536595, -123.2449326), zoom: 12, mapTypeId: google.maps.MapTypeId.ROADMAP, scrollwheel: false }; var map = new google.maps.Map(document.getElementById('map'), mapOptions); $.each(locations, function(index, location) { var marker = new google.maps.Marker({ position: new google.maps.LatLng(location[0], location[1]), map: map, icon: 'http://html.realia.byaviators.com/assets/img/marker-transparent.png' }); var myOptions = { content: '<div class="infobox"><div class="image"><img src="mls_pics/all_type/img-' + location[5] + '_1.jpg" width="80" alt="' + location[2] + '"></div><div class="title"><a href="featuredlistingdetail.cfm?sysid=' + location[5] + '">' + location[2] + '</a></div><div class="area"><span class="key">Area:</span><span class="value">' + location[3] + 'ft<sup>2</sup></span></div><div class="price">' + location[4] + '</div><div class="link"><a href="featuredlistingdetail.cfm?sysid=' + location[5] + '">View more</a></div></div>', maxWidth: 0, pixelOffset: new google.maps.Size(-146, -190), zIndex: null, closeBoxURL: "", infoBoxClearance: new google.maps.Size(1, 1), position: new google.maps.LatLng(location[0], location[1]), isHidden: false, pane: "floatPane", enableEventPropagation: false }; marker.infobox = new InfoBox(myOptions); marker.infobox.isOpen = false; var myOptions = { draggable: true, content: '<div class="marker"><div class="marker-inner"></div></div>', disableAutoPan: true, pixelOffset: new google.maps.Size(-21, -58), position: new google.maps.LatLng(location[0], location[1]), closeBoxURL: "", isHidden: false, // pane: "mapPane", enableEventPropagation: true }; marker.marker = new InfoBox(myOptions); marker.marker.open(map, marker); markers.push(marker); google.maps.event.addListener(marker, "click", function (e) { var curMarker = this; $.each(markers, function (index, marker) { // if marker is not the clicked marker, close the marker if (marker !== curMarker) { marker.infobox.close(); marker.infobox.isOpen = false; } }); if(curMarker.infobox.isOpen === false) { curMarker.infobox.open(map, this); curMarker.infobox.isOpen = true; map.panTo(curMarker.getPosition()); } else { curMarker.infobox.close(); curMarker.infobox.isOpen = false; } }); });}function InitMap() { google.maps.event.addDomListener(window, 'load', LoadMap);}</cfoutput></script>
iconFile = 'http://maps.google.com/mapfiles/ms/icons/green-dot.png';
marker.setIcon(iconFile);
You may refer :-
http://chrisltd.com/blog/2013/08/google-map-random-color-pins/
https://developers.google.com/maps/documentation/javascript/markers#simple_icons
Hope this helps...