asked on

Two different types of icon marker on GMap depending on type of location

Hi, I am trying to achieve two different types of icon markers.
This is a map that show homes for sale, or homes sold.
I want type "a"icon for a homes for sale and type "b" icon for a sold home.

This shows only homes for sale, with icon"a".

How do I show icon "b" for a home which is sold?
DB has field to show "active" or "sold".

Script is outputting data using ColdFusion

Thanks Expert!

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

Open in new window

Tom Beck

Assuming the locations array has an index that would yield the value of the active/sold column. Let's say that index is 2, then:

$.each(locations, function(index, location) {
        var icon-path = (location[2] == "active") ? 'http://html.realia.byaviators.com/assets/img/marker-transparent.png' : 'http://html.realia.byaviators.com/assets/img/<some-other-icon>.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

izweig

ASKER

Swapping that code snippet cause the map not to load.
Error console shows this:

Error: SyntaxError: missing ; before statement

Source Code:
        var icon-path = (location[6] == "active") ? 'http://html.realia.byav

Open in new window

Tom Beck

Are you sure you copied the entire line for the ternary statement all the way to the semi-colon at the end. It's kinda long.

var icon-path = (location[2] == "active") ? 'http://html.realia.byaviators.com/assets/img/marker-transparent.png' : 'http://html.realia.byaviators.com/assets/img/<some-other-icon>.png';

Obviously, you need to adjust the path to the alternate icon png file.

izweig

ASKER

Statement looks fine, no returns, is one long string...

$.each(locations, function(index, location) {
        var icon-path = (location[6] == "active") ? 'http://html.realia.byaviators.com/assets/img/marker-transparent.png' : 'http://html.realia.byaviators.com/assets/img/marker-transparent2.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

ASKER CERTIFIED SOLUTION

Tom Beck

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

izweig

ASKER

Awesome, Thank you very much!