Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17


how to differentiate  marker types  on google map

Posted on 2014-01-13
Medium Priority
Last Modified: 2014-01-30
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!
Question by:izweig
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2

Expert Comment

by:Mahesh Bhutkar
ID: 39778539

Author Comment

ID: 39779980
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?

Expert Comment

by:Mahesh Bhutkar
ID: 39799618
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.

Accepted Solution

izweig earned 0 total points
ID: 39809191
Thanks to: Tom Beck (TommyBoy)

Assuming the locations array has an index that would yield the value of the active/sold column. Let's say that index is 3, then:
$.each(locations, function(index, location) {
        var icon_path = (location[3] == "active") ? 'marker-1.png' : 'marker-2.png';
        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(location[0], location[1]),
            map: map,
            icon: icon_path

Open in new window


Author Closing Comment

ID: 39820335
could not get solution to work

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
This article will show, step by step, how to integrate R code into a R Sweave document
Learn how to match and substitute tagged data using PHP regular expressions. Demonstrated on Windows 7, but also applies to other operating systems. Demonstrated technique applies to PHP (all versions) and Firefox, but very similar techniques will w…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

722 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question