Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 714
  • Last Modified:

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

0
izweig
Asked:
izweig
  • 3
  • 3
1 Solution
 
Tom BeckCommented:
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

0
 
izweigAuthor Commented:
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

0
 
Tom BeckCommented:
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.
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
izweigAuthor Commented:
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

0
 
Tom BeckCommented:
Sorry, just a typo on the var name. Should be icon_path, not icon-path (or what ever you like).
$.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

0
 
izweigAuthor Commented:
Awesome, Thank you very much!
0

Featured Post

[Webinar On Demand] Database Backup and Recovery

Does your company store data on premises, off site, in the cloud, or a combination of these? If you answered “yes”, you need a data backup recovery plan that fits each and every platform. Watch now as as Percona teaches us how to build agile data backup recovery plan.

  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now