?
Solved

Google Maps - Stop pop up for points with no info to show

Posted on 2012-04-05
6
Medium Priority
?
271 Views
Last Modified: 2012-08-14
Hello,

I'm working on a villa rntal site and want to have pop up windows where a villa has information, but no pop up windows if there is no information.  I'm not good at Javascript, and think that an if/end if should work on the function creating the map click, but am not sure how to do this.  Properties with info will have a green icon (type=green;) and properties without info would have a different icon, so I'm hoping it would be possible to only call the pop-up function if the type= green.

Here's my code:

<script language="javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">

      var customIcons = {
            green: {
                  icon: 'http://labs.google.com/ridefinder/images/mm_20_green.png',
                  shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
            }
      };

      var xmlsource = '<%=xmlss%>';
      
      $(document).ready(function() {
            var latlng = new google.maps.LatLng(<%=lat%>, <%=lng%>);
            var myOptions = {
                  zoom: <%=zoom%>,
                  center: latlng,
                  mapTypeId: google.maps.MapTypeId.HYBRID
            };
            var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
//        var marker2 = new GMarker(center, {draggable: true});  
//        map.addOverlay(marker2);
//            var marker = new google.maps.Marker({ map: map, position: latlng, icon: icon.icon, shadow: icon.shadow });
//            google.maps.event.addListener(marker);
            var infoWindow = new google.maps.InfoWindow;
            $( $.parseXML( xmlsource ) ).find("marker").each(function() {
//            $(xmlsource).find("marker").each(function() {
                  debugger;
                  var name = $(this).attr("name");
                  var town = $(this).attr("town");
                  var typer = $(this).attr("typer");
                  var beds = $(this).attr("beds");
                  var thumb = $(this).attr("thumb");
                  var distance = $(this).attr("distance");
                  var type = $(this).attr("type");                  
//                  var type = "green";
                  var lat = parseFloat($(this).attr("lat"));
                  var lng = parseFloat($(this).attr("lng"));
                  var point = new google.maps.LatLng(lat, lng);
                  var html = '<div id="content">';
//                  html += '<div id="siteNotice">' + '</div>';
                  html += '<h3 id="firstHeading" class="firstHeading">' + name + '</h3>'
                  html += '<div id="bodyContent">'
                  html += '<img src="' + thumb + '" height="120" width="160"/><br />' + town + '&nbsp;Bedrooms:' + beds
                  html += '&nbsp;Distance:' + distance
                  html += '</div>';
                  html += '</div>';
                  var icon = customIcons[type] || {};
                  var marker = new google.maps.Marker({ map: map, position: point, icon: icon.icon, shadow: icon.shadow });
                  bindInfoWindow(marker, map, infoWindow, html);
            });;
      });
      
      function bindInfoWindow(marker, map, infoWindow, html) {
            google.maps.event.addListener(marker, 'click', function() { infoWindow.setContent(html); infoWindow.open(map, marker); });
      }

</script>

Thanks in advance for your help!
0
Comment
Question by:Nico2011
[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

Accepted Solution

by:
Tom Beck earned 2000 total points
ID: 37810643
I'm assuming you intend to have at least one more color:

     var customIcons = {
            green: {
                  icon: 'http://labs.google.com/ridefinder/images/mm_20_green.png',
                  shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
            },
            red: {
                  icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
                  shadow: 'http://labs.google.com/ridefinder/images/mm_20_red.png'
            }
      };

If so, then you could do this:
              /*the rest of your code*/ 

                        var icon = customIcons[type];
                        var marker = new google.maps.Marker({ 
                            map: map, 
                            position: point, 
                            icon: icon.icon, 
                            shadow: icon.shadow 
                        });                        
                        if(type == 'green'){
                            bindInfoWindow(marker, map, infoWindow, html);
                        }else{
                            marker.setMap(map);
                        }

                        /*the rest of your code*/

Open in new window

0
 

Author Comment

by:Nico2011
ID: 37810993
Thanks but for some reason (*I* am probably the reason), it's not working... you can see the page here: http://gorgeous-villas.com/results.asp?lng=7.00241&lat=43.64701&location=Valbonne

Thnks and hope to hear from you soon!
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 37811709
The link you provided does not reflect the changes I suggested. Maybe you forgot to upload the latest version?
0
Get real performance insights from real users

Key features:
- Total Pages Views and Load times
- Top Pages Viewed and Load Times
- Real Time Site Page Build Performance
- Users’ Browser and Platform Performance
- Geographic User Breakdown
- And more

 

Author Comment

by:Nico2011
ID: 37811826
Right - I think I need a holiday - I wrote the code in the wrong page - really sorry - I did say the issue was probably me, but didn't imagin doing anything quite so embarassingly dumb!

Thank you - it works perfectly!
0
 

Author Closing Comment

by:Nico2011
ID: 37811833
Perfect solution - thank you!
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 37811872
You're welcome and don't beat yourself up over that. It's easy to confuse the development environment with the live web server. Thanks for the points.
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

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
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…
Suggested Courses

770 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