troubleshooting Question

how to differentiate marker types on google map

Avatar of izweig
izweig asked on
JavaScriptScripting Languages
5 Comments1 Solution680 ViewsLast Modified:
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);
Thank you!

Our community of experts have been thoroughly vetted for their expertise and industry experience.

Join our community to see this answer!
Unlock 1 Answer and 5 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 5 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros