Solved

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

Posted on 2014-01-19
6
694 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
[X]
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
  • 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
Space-Age Communications Transitions to DevOps

ViaSat, a global provider of satellite and wireless communications, securely connects businesses, governments, and organizations to the Internet. Learn how ViaSat’s Network Solutions Engineer, drove the transition from a traditional network support to a DevOps-centric model.

 

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

Independent Software Vendors: 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

Suggested Solutions

This article discusses how to create an extensible mechanism for linked drop downs.
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…

756 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