开发者

Hide/Show Map Markers

开发者 https://www.devze.com 2023-04-06 23:01 出处：网络
I wonder whether someone can help please. I\'m trying to put together a script which hides and shows locations on my map. The host code I\'ve been using is here and my code is shown below:
相关专题：google-maps-api-3javascript

I wonder whether someone can help please.

I'm trying to put together a script which hides and shows locations on my map. The host code I've been using is here and my code is shown below:

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
    <title>Google Maps Javascript API v3 Example: Marker Categories</title> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
    <title>Google Maps</title>
<style type="text/css">
html, body { height: 100%; } 
</style>
    <script type="text/javascript">
            var customIcons = {
            "Artefact": {
            icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
            shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
            },
            "Coin": {
            icon: 'http://labs.google.com/ridefinder/images/mm_20_green.png',
            shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
            },
            "Jewellery": {
            icon: 'http://labs.google.com/ridefinder/images/mm_20_yellow.png',
            shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
            },
            "Precious Metal": {
            icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png',
            shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
            }
            };

      // this variable will collect the html which will eventually be placed in the side_bar 
      var side_bar_html = ""; 

      var gmarkers = [];
      var map = null;

var infowindow = new google.maps.InfoWindow(
  { 

          // A function to create the marker and set up the event window
function createMarker(point,findname,html,findcategory) {
    var contentString = html;
    var marker = new google.maps.Marker({
        position: point,
        var icon = customIcons[findcategory],
        shadow: iconShadow,
        map: map,
        title: findname,
        zIndex: Math.round(latlng.lat()*-100000)<<5
        });
        // === Store the category and name info as a marker properties ===
        marker.mycategory = findcategory;                                 
        marker.myname = findname;
        gmarkers.push(marker);

    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(contentString); 
        infowindow.open(map,marker);
        });
}

      // == shows all markers of a particular category, and ensures the checkbox is checked ==
      function show(findcategory) {
        for (var i=0; i<gmarkers.length; i++) {
          if (gmarkers[i].mycategory == findcategory) {
            gmarkers[i].setVisible(true);
          }
        }
        // == check the checkbox ==
        document.getElementById(findcategory+"box").checked = true;
      }

      // == hides all markers of a particular category, and ensures the checkbox is cleared ==
      function hide(findcategory) {
        for (var i=0; i<gmarkers.length; i++) {
          if (gmarkers[i].mycategory == findcategory) {
            gmarkers[i].setVisible(false);
          }
        }
        // == clear the checkbox ==
        document.getElementById(findcategory+"box").checked = false;
        // == close the info window, in case its open on a marker that we just hid
        infowindow.close();
      }

      // == a checkbox has been clicked ==
      function boxclick(box,findcategory) {
        if (box.checked) {
          show(findcategory);
        } else {
          hide(findcategory);
        }
        // == rebuild the side bar
        makeSidebar();
      }

      function myclick(i) {
        google.maps.event.trigger(gmarkers[i],"click");
      }


      // == rebuilds the sidebar to match the markers currently displayed ==
      function makeSidebar() {
        var html = "";
        for (var i=0; i<gmarkers.length; i++) {
          if (gmarkers[i].getVisible()) {
            html += '<a href="javascript:myclick(' + i + ')">' + gmarkers[i].myname + '<\/a><br>';
          }
        }
        document.getElementById("side_bar").innerHTML = html;
      }

  function initialize() {
    var myOptions = {
      zoom:6,  
      center: new google.maps.LatLng(54.312195845815246,-4.45948481875007),
      mapTypeId: google.maps.MapTypeId.TERRAIN
    }
    map = new google.maps.Map(document.getElementById("map"), myOptions);


    google.maps.event.addListener(map, 'click', function() {
        infowindow.close();
        });



      // Read the data
  downloadUrl("loadpublicfinds.php", function(data) { 
            var xml = data.responseXML; 
  var markers = xml.documentElement.getElementsByTagName("marker");

        for (var i = 0; i < markers.length; i++) {
          // obtain the attribues of each marker
          var lat = parseFloat(markers[i].getAttribute("findosgb36lat"));
          var lng = parseFloat(markers[i].getAttribute("findosgb36lon"));
          var point = new google.maps.LatLng(lat,lng);
          var findname = markers[i].getAttribute("findname");
          var finddescription = markers[i].getAttribute("finddescription");
          var html = "<b>" + 'Find : ' + "</b>" + findname + "<p>" + "<b>" + 'Description: ' + "</b>" + finddescription + "</p>"
          var findcategory = markers[i].getAttribute("findcategory");
          // create the marker
          var marker = createMarker(point,findname,html,findcategory);
        }

        // == show or hide the categories initially ==
        show("Artefact");
        hide("Coin");
        hide("Jewellery");
        hide("Precious Metal");
        // == create the initial sidebar ==
        makeSidebar();
      });
    }

    </script>
  </head>
<body style="margin:0px; padding:0px;" onload="initialize()"> 




    <!-- you can use tables or divs for the overall layout -->
    <table border=1>
      <tr>
        <td>
           <div id="map" style="width: 550px; height: 450px"></div>
        </td>
        <td valign="top" style="width:150px; text-decoration: underline; color: #4444ff;"> 
           <div id="side_bar"></div>
        </td>
      </tr>
    </table>
    <form action="#">
      Artefact: <input type="checkbox" id="Artefactbox" onclick="boxclick(this,'Artefact')" /> &nbsp;&nbsp;
      Coin: <input type="checkbox" id="Coinbox" onclick="boxclick(this,'Coin')" /> &nbsp;&nbsp;
      Jewellery: <input type="checkbox" id="Jewellerybox" onclick="boxclick(this,'Jewellery')" /><br />
      Precious Metal: <input type="checkbox" id="PreciousMetalbox" onclick="boxclick(this,'Precious_Metal')" /><br />
    </form>  

  </body>

</html>

When I try and run my code I get the following error: Message: Expected identifier, string or number Line: 42 Char: 1

The line which it points to is this 

function createMarker(point,findname,html,findcategory) {

I'm fairly new to this, but I've run the code through 'Firebug' and it states that the line id 'missing: propertyid' but I must admit I'm not sure what this means.

I just wondered whether someone could take a look at this please and let me know where I'm going wrong.

Many thanks

UPDATED CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Map My Finds - Public Finds</title>
        <link rel="stylesheet" href="css/publicfinds.css" type="text/css" media="all" />
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=en"></script>
        <script type="text/javascript"> 
            var customIcons = {
            "Artefact": {
            icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
            shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
            },
            "Coin": {
            icon: 'http://labs.google.com/ridefinder/images/mm_20_green.png',
            shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
            },
            "Jewellery": {
            icon: 'http://labs.google.com/ridefinder/images/mm_20_yellow.png',
            shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
            },          "Precious Metal": {
            icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png',
            shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
            }
            };

               // this variable will collect the html which will eventually be placed in the side_bar 
      var side_bar_html = ""; 

      var gmarkers = [];      var markers;

var infowindow = new google.maps.InfoWindow(); 


function createMarker(latlng,name,html,category) { var contentString = html; var marker = new google.maps.Marker({  position: point,  icon: customIcons[findcategory],  shadow: iconShadow,  map: map,  title: findname,  zIndex: Math.round(latlng.lat()*-100000)<<5  }); 

     // === Store the category and name info as a marker properties ===
        marker.mycategory = findcategory;                             

        marker.myname = findname;
        gmarkers.push(marker);

    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(contentString); 
        infowindow.open(map,marker);
        });

      // == shows all markers of a particular category, and ensures the checkbox is checked ==
      function show(findcategory) {
        for (var i=0; i<gmarkers.length; i++) {
          if (gmarkers[i].mycategory == findcategory) {
            gmarkers[i].setVisible(true);
          }
        }
        // == check the checkbox ==
        document.getElementById(findcategory+"box").checked = true;
      }

      // == hides all markers of a particular category, and ensures the checkbox is cleared ==
      function hide(findcategory) {
        for (var i=0; i<gmarkers.length; i++) {
          if (gmarkers[i].mycategory == findcategory) {
            gmarkers[i].setVisible(false);
          }
        }
        // == clear the checkbox ==
        document.getElementById(findcategory+"box").checked = false;
        // == close the info window, in case its open on a marker that we just hid
        infowindow.close();
      }

      // == a checkbox has been clicked ==
      function boxclick(box,findcategory) {
        if (box.checked) {
          show(findcategory);
        } else {
          hide(findcategory);
        }
        // == rebuild the side bar
        makeSidebar();
      }

      function myclick(i) {
        google.maps.event.trigger(gmarkers[i],"click");
      }


      // == rebuilds the sidebar to match the markers currently displayed ==
      function makeSidebar() {
        var html = "";
        for (var i=0; i<gmarkers.length; i++) {
          if (gmarkers[i].getVisible()) {
            html += '<a href="javascript:myclick(' + i + ')">' + gmarkers[i].myname + '<\/a><br>';
          }
        }
        document.getElementById("side_bar").innerHTML = html;
      }                 function load() { 
            var map = new google.maps.Map(document.getElementById("map"), { 
            center: new google.maps.LatLng(54.312195845815246,-4.45948481875007), 
            zoom:6, 
            mapTypeId: 'terrain' 
            }); 


    google.maps.event.addListener(map, 'click', function() {
        infowindow.close();
        });

            // Change this depending on the name of your PHP file 
            downloadUrl("loadpublicfinds.php", function(data) { 
            var xml = data.responseXML; 
            var markers = xml.documentElement.getElementsByTagName("marker");
            for (var i = 0; i < markers.length; i++) { 
       开发者_开发技巧     var lat = parseFloat(markers[i].getAttribute("findosgb36lat"));
            var lng = parseFloat(markers[i].getAttribute("findosgb36lon"));             var point = new google.maps.LatLng(lat,lng);            var findcategory = markers[i].getAttribute("findcategory");             var findname = markers[i].getAttribute("findname");             var finddescription = markers[i].getAttribute("finddescription");
            var html = "<b>" + 'Find : ' + "</b>" + findname + "<p>" + "<b>" + 'Description: ' + "</b>" + finddescription + "</p>"
            var marker = createMarker(point,findname,html,findcategory);
        }
      // == show or hide the categories initially ==
        show("Artefact");
        hide("Coin");
        hide("Jewellery");      hide("Precious Metal");
        // == create the initial sidebar ==
        makeSidebar();
      });
    }
            function downloadUrl(url, callback) { 
            var request = window.ActiveXObject ? 
            new ActiveXObject('Microsoft.XMLHTTP') : 
            new XMLHttpRequest; 

            request.onreadystatechange = function() { 
            if (request.readyState == 4) { 
            request.onreadystatechange = doNothing; 
            callback(request, request.status); 
            } 
            }; 

            request.open('GET', url, true); 
            request.send(null); 
            } 

            function doNothing() {} 
            }
            </script>  </head>     <body onLoad="load()">
                <div id="map"></div> <!-- you can use tables or divs for the overall layout --> <form action="#">
      Theatres: <input type="checkbox" id="Artefact" onclick="boxclick(this,'Artefact')" /> &nbsp;&nbsp;
      Golf Courses: <input type="checkbox" id="Coin" onclick="boxclick(this,'Coin')" /> &nbsp;&nbsp;
       Golf Courses: <input type="checkbox" id="Jewellery" onclick="boxclick(this,'Jewellery')" /> &nbsp;&nbsp;
      Tourist Information: <input type="checkbox" id="Precious Metal" onclick="boxclick(this,'Precious Metal')" /><br />
       </form>       </body>  </html>

Couple syntax errors I noticed:

1.) All of you code was wrapped in the InfoWindow object

change this:

var infowindow = new google.maps.InfoWindow(
  {

to this:

var infowindow = new google.maps.InfoWindow();

2.) You are setting the icon property wrong in the marker

change this:

 var marker = new google.maps.Marker({
        position: point,
        var icon = customIcons[findcategory], //wont work
        shadow: iconShadow,
        map: map,
        title: findname,
        zIndex: Math.round(latlng.lat()*-100000)<<5
        });

to this:

 var marker = new google.maps.Marker({
        position: point,
        icon: customIcons[findcategory],
        shadow: iconShadow,
        map: map,
        title: findname,
        zIndex: Math.round(latlng.lat()*-100000)<<5
        });

I was not receiving any more syntax errors in Visual Studio after making these changes.

Edit to include additional fix:

the downloadUrl function is not defined on this page. You did not include the script file in the head area of the page.

Add this right after where the Google maps api is referenced:

<script type="text/javascript" src="scripts/downloadxml.js"></script>

Update

Looks like you changed the name of the point parameter to latlng in the createMarker function, but did not change it everywhere inside the function. The position property is still set to point. Also it looks like you might be missing the closing bracket for the create marker function as well.

function createMarker(latlng,name,html,category) { 
    var contentString = html; 
    var marker = new google.maps.Marker({  
        position: latlng, //changed from 'point' 
        icon: customIcons[findcategory],  
        shadow: iconShadow, 
        map: map, 
        title: findname,  
        zIndex: Math.round(latlng.lat()*-100000)<<5  
    }); 

    // === Store the category and name info as a marker properties ===
    marker.mycategory = findcategory;                             
    marker.myname = findname;
    gmarkers.push(marker);

    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(contentString); 
        infowindow.open(map,marker);
    });

} //is this where this function ends?

I would recommend that you put all of this script into a separate file and then reference it with a <script type="text/javascript" src="path to your script" /> tag. It will make the file easier to maintain and troubleshoot in the future.

0

上一篇:

:下一篇

更多 问答 相关资讯：

精彩评论

暂无评论...
登录 注册
Qedev.com
验证码 换一张
取 消

    关注公众号

    热门标签

    图文推荐

    Delphi - Custom drawing a message list

    Delphi - Custom drawing a message list
    C++ header-only include pattern

    C++ header-only include pattern
    IE7 Margin Collapses Into Padding

    IE7 Margin Collapses Into Padding
    in CoffeeScript, how can I use a variable as a key in a hash?

    in CoffeeScript, how can I use a variable as a key in a hash?
    Interactive visualization of a graph in python [closed]

    Interactive visualization of a graph in python [closed]
    How to customise PHP MYSQL tables?

    How to customise PHP MYSQL tables?
    High quality, simple random password generator

    High quality, simple random password generator
    Image Recognition ApI in android

    Image Recognition ApI in android

    开发者开发者网给大家分享系统运维,大数据运维,云计算,编程开发技巧,路由交换,运维和开发相关的资讯及技术文章，同时StackOverflow中文社区，知识经验交流分享。

    法律声明：本站内容均为网友上传，网站举办方负责审核和监督，如存在版权或非法内容，欢迎举报，我们将尽快予以删除。邮箱：devze@qq.com

    Copyright © 2018-2020 开发者. All rights reserved. Powered by 开发者ICP备案号: 京ICP备10032868号-9