Solved

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

Posted on 2014-01-19
6
690 Views
Last Modified: 2014-01-20
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
Comment
Question by:izweig
  • 3
  • 3
6 Comments
 
LVL 38

Expert Comment

by:Tom Beck
ID: 39793362
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
 

Author Comment

by:izweig
ID: 39794477
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
 
LVL 38

Expert Comment

by:Tom Beck
ID: 39794495
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
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 

Author Comment

by:izweig
ID: 39794537
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
 
LVL 38

Accepted Solution

by:
Tom Beck earned 500 total points
ID: 39794644
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
 

Author Closing Comment

by:izweig
ID: 39795004
Awesome, Thank you very much!
0

Featured Post

Webinar: Aligning, Automating, Winning

Join Dan Russo, Senior Manager of Operations Intelligence, for an in-depth discussion on how Dealertrack, leading provider of integrated digital solutions for the automotive industry, transformed their DevOps processes to increase collaboration and move with greater velocity.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
html input 8 42
jQuery when a text link is clicked? 16 37
Binding a Grid in Javascript 5 42
html border input line 7 13
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

808 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