Link to home
Start Free TrialLog in
Avatar of izweig

asked on

how to differentiate marker types on google map

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">   

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: ''

		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);

        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.isOpen = false;

            if(curMarker.infobox.isOpen === false) {
      , this);
                curMarker.infobox.isOpen = true;
            } else {
                curMarker.infobox.isOpen = false;


function InitMap() {
	google.maps.event.addDomListener(window, 'load', LoadMap);

Open in new window

Thank you!
Avatar of Mahesh Bhutkar
Mahesh Bhutkar

Avatar of izweig


Thanks for that..
I am having trouble to make that work.
My level of javascript is pretty basic.
Could you please expand with more details?
The locations which you are iterating, based on it status (Available/Sold), you can apply the iconFile.

Use to display sold homes  
Use to display homes for sale

Using marker.setIcon(iconFile), you can set different markers as per your requirement.
Avatar of izweig

Link to home
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of izweig


could not get solution to work