Question

I am trying to make a simple webpage with a Google Maps window. In this window, I have a site location marker (can be changed by filling in new lat and lon and clicking the "Check site" button). When pressed, it moves the site marker and centers to the site. Besides that, I want to load a range markers with a Marker Manager. I have predefined a few of the markers to test. Later on, this will be a huge marker list (of NOAA stations FYI). I want to each of these station markers to be clickable, and check the corresponding checkbox when clicked. I tried implementing this, but it seems that my markers are not showing. I have searched and searched, but cannot seem to find out why they are not showing. The code of my webpage is below.

A side question: what would be an appropriate way to load thousands (10k+) of these markers (distributed all over the world) into the application. Is the Marker Manager really that efficient by only showing the markers within the bounds, or does it still have limits. I would also imagine that loading thousands of markers is quite some data to load. Please also your input here. Thanks!

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map-canvas { height: 100% }
    </style>
    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBPtpV_saW7qtACfPVYBWIB-Jw253iBca4&sensor=false"></script>
    <script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markermanager/src/markermanager.js"></script>
    <script type="text/javascript">
        var stations =[
            { "name": "Oostende", "posn": [51.233, 2.917], "code":"(64080,99999)" },
            { "name": "Gent", "posn": [51.183, 3.817], "code":"(64310,99999)" },
            { "name": "Koksijde", "posn": [51.083, 2.65], "code":"(64000,99999)" },
            { "name": "Wevelgem", "posn": [80.817, 3.2], "code":"(64160,99999)" },
            { "name": "Melle", "posn": [50.983, 3.983], "code":"(64340,99999)" },
            { "name": "Uccle", "posn": [50.8, 4.35], "code":"(64470,99999)" },
            { "name": "Antwerpen", "posn": [51.2, 4.467], "code":"(64500,99999)" },
            { "name": "Retie", "posn": [51.217, 5.033], "code":"(64640,99999)" },
            { "name": "Goetsenhoven", "posn": [50.783, 4.95], "code":"(64630,99999)" },
            { "name": "Schaffen", "posn": [51, 5.067], "code":"(64650,99999)" },
            { "name": "Diepenbeek", "posn": [50.917, 5.45], "code":"(64770,99999)" },
            { "name": "Chievres", "posn": [50.567, 3.833], "code":"(64320,99999)" },
            { "name": "Bierset", "posn": [50.65, 5.45], "code":"(64780,99999)" },
            { "name": "Kleine Brogel", "posn": [51.167, 5.467], "code":"(64790,99999)" },
            { "name": "Ernage", "posn": [50.567, 4.683], "code":"(64590,99999)" }
        ];
        var red_marker = "http://maps.google.com/mapfiles/ms/icons/red-dot.png";
        var green_marker = "http://maps.google.com/mapfiles/ms/icons/green-dot.png";
        var map;
        var mgr;
        var site_marker;
        var markers;
        function setupMap() {
            var latlng = new google.maps.LatLng(50.85, 4.35);
            var mapElem = document.getElementById("map-canvas-9");
            var mapOptions = {
                zoom: 8,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
                };
            map = new google.maps.Map(mapElem, mapOptions);
            site_marker = new google.maps.Marker({
                position: latlng,
                map: map,
                title: " latitude N, longitude ",
                icon: red_marker
                });
            var listener = google.maps.event.addListener(map, 'bounds_changed', function(){
                setupNoaaMarkers();
                google.maps.event.removeListener(listener);
            });              
        }
        function setupNoaaMarkers() {
            mgr = new MarkerManager(map);
            google.maps.event.addListener(mgr, 'loaded', function(){
                mgr.addMarkers(getNoaaMarkers(),8);
                mgr.refresh();
            });      
        }
        function getNoaaMarkers() {
            var markers=[];
            for (var place in stations) {
                var title = place.name;
                var posn = new google.maps.LatLng(place.posn[0], place.posn[1]);
                var code = place.code;
                var marker = createMarker(posn, title, code);
                google.maps.event.addListener(marker, 'click', function() {
                    if (document.getElementById(code).checked)
                    {
                        document.getElementById(code).checked=false;
                    }
                    else
                    {
                        document.getElementById(code).checked=true;
                    }
                });
                markers.push(marker);
            }
            return markers;
        }
        function changeSitePosition() {
            var lat = document.getElementById("id_latitude").value;
            var lon = document.getElementById("id_longitude").value;
            if (lat === 0 & lon===0)
            {
                lat = 50.85;
                lon = 4.35;
            }
            var latlng = new google.maps.LatLng(lat, lon);
            site_marker.setPosition(latlng);
            map.setCenter(latlng);
        }
    </script>
  </head>
  <body onload="setupMap()">
    <div id="map-canvas-9" style="width: 800px; height: 300px;" class="easy-map-googlemap">
    </div>
    <table>
        <tr>
            <td>Latitude</td>
            <td><input id="id_latitude" max="90" min="-90" name="latitude" step="0.0001" type="number" /></td>
            <td></td>
            <td>In decimal degree, within [-90,90], max. 4 decimals, e.g. : 45.5 </td>
        </tr>
        <tr>
            <td>Longitude</td>
            <td><input id="id_longitude" max="180" min="-180" name="longitude" step="0.0001" type="number" /></td>
            <td></td>
            <td>In decimal degree, within [0,360], max. 4 decimals, e.g. : 12.3 </td>
        </tr>
        <tr>
            <td><button onclick="changeSitePosition()">Check site</button></td>
        </tr>
        <tr>
            <td><label for="check"><input name="stations" type="checkbox" id="(64080, 99999)" /> Oostende</label></td>
        </tr>
        <tr>
            <td><label for="check"><input name="stations" type="checkbox" id="(64310, 99999)" /> Gent</label></td>
        </tr>
        <tr>
            <td><label for="check"><input name="stations" type="checkbox" id="(64000, 99999)" /> Koksijde</label></td>
        </tr>
        <tr>
            <td><label for="check"><input name="stations" type="checkbox" id="(64160, 99999)" /> Wevelgem</label></td>
        </tr>
        <tr>
            <td><label for="check"><input name="stations" type="checkbox" id="(64340, 99999)" /> Melle</label></td>
        </tr>
        <tr>
            <td><label for="check"><input name="stations" type="checkbox" id="(64470, 99999)" /> Uccle</label></td>
        </tr>
        <tr>
            <td><label for="check"><input name="stations" type="checkbox" id="(64500, 99999)" /> Antwerpen</label></td>
        </tr>
        <tr>
            <td><label for="check"><input name="stations" type="checkbox" id="(64640, 99999)" /> Retie</label></td>
        </tr>
        <tr>
            <td><label for="check"><input name="stations" type="checkbox" id="(64630, 99999)" /> Goetsenhoven</label></td>
        </tr>
        <tr>
            <td><label for="check"><input name="stations" type="checkbox" id="(64650, 99999)" /> Schaffen</label></td>
        </tr>
        <tr>
            <td><label for="check"><input name="stations" type="checkbox" id="(64770, 99999)" /> Diepenbeek</label></td>
        </tr>
        <tr>
            <td><label for="check"><input name="stations" type="checkbox" id="(64320, 99999)" /> Chievres</label></td>
        </tr>
        <tr>
            <td><label for="check"><input name="stations" type="checkbox" id="(64780, 99999)" /> Bierset</label></td>
        </tr>
        <tr>
            <td><label for="check"><input name="stations" type="checkbox" id="(64790, 99999)" /> Kleine Brogel</label></td>
        </tr>
        <tr>
            <td><label for="check"><input name="stations" type="checkbox" id="(64590, 99999)" /> Ernage</label></td>
        </tr>
    </table>
  </body>
</html>
Was it helpful?

Solution

Use a debugger.

  1. for the first value of place (0) place.posn (0.posn) is undefined; it should be stations[place].posn
  2. There is no createMarker function in your code.
  3. HTML id's may not contain spaces

    <!DOCTYPE html>
    <html>
      <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <style type="text/css">
          html { height: 100% }
          body { height: 100%; margin: 0; padding: 0 }
          #map-canvas { height: 100% }
        </style>
        <script type="text/javascript"
          src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBPtpV_saW7qtACfPVYBWIB-Jw253iBca4&sensor=false"></script>
        <script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markermanager/src/markermanager.js"></script>
        <script type="text/javascript">
            var stations =[
                { "name": "Oostende", "posn": [51.233, 2.917], "code":"(64080,99999)" },
                { "name": "Gent", "posn": [51.183, 3.817], "code":"(64310,99999)" },
                { "name": "Koksijde", "posn": [51.083, 2.65], "code":"(64000,99999)" },
                { "name": "Wevelgem", "posn": [80.817, 3.2], "code":"(64160,99999)" },
                { "name": "Melle", "posn": [50.983, 3.983], "code":"(64340,99999)" },
                { "name": "Uccle", "posn": [50.8, 4.35], "code":"(64470,99999)" },
                { "name": "Antwerpen", "posn": [51.2, 4.467], "code":"(64500,99999)" },
                { "name": "Retie", "posn": [51.217, 5.033], "code":"(64640,99999)" },
                { "name": "Goetsenhoven", "posn": [50.783, 4.95], "code":"(64630,99999)" },
                { "name": "Schaffen", "posn": [51, 5.067], "code":"(64650,99999)" },
                { "name": "Diepenbeek", "posn": [50.917, 5.45], "code":"(64770,99999)" },
                { "name": "Chievres", "posn": [50.567, 3.833], "code":"(64320,99999)" },
                { "name": "Bierset", "posn": [50.65, 5.45], "code":"(64780,99999)" },
                { "name": "Kleine Brogel", "posn": [51.167, 5.467], "code":"(64790,99999)" },
                { "name": "Ernage", "posn": [50.567, 4.683], "code":"(64590,99999)" }
            ];
            var red_marker = "http://maps.google.com/mapfiles/ms/icons/red-dot.png";
            var green_marker = "http://maps.google.com/mapfiles/ms/icons/green-dot.png";
            var map;
            var mgr;
            var site_marker;
            var markers;
        var infowindow = new google.maps.InfoWindow({});
            function setupMap() {
                var latlng = new google.maps.LatLng(50.85, 4.35);
                var mapElem = document.getElementById("map-canvas-9");
                var mapOptions = {
                    zoom: 8,
                    center: latlng,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                    };
                map = new google.maps.Map(mapElem, mapOptions);
                site_marker = new google.maps.Marker({
                    position: latlng,
                    map: map,
                    title: " latitude N, longitude ",
                    icon: red_marker
                    });
                var listener = google.maps.event.addListener(map, 'bounds_changed', function(){
                    setupNoaaMarkers();
                    google.maps.event.removeListener(listener);
                });              
            }
            function setupNoaaMarkers() {
                mgr = new MarkerManager(map);
                google.maps.event.addListener(mgr, 'loaded', function(){
                    mgr.addMarkers(getNoaaMarkers(),8);
                    mgr.refresh();
                });      
            }
            function getNoaaMarkers() {
                var markers=[];
                for (var place in stations) {
                    var title = place.name;
                    var posn = new google.maps.LatLng(stations[place].posn[0], stations[place].posn[1]);
                    var code = stations[place].code;
                    var marker = createMarker(posn, title, code);
                }
                return markers;
            }
            function changeSitePosition() {
                var lat = document.getElementById("id_latitude").value;
                var lon = document.getElementById("id_longitude").value;
                if (lat === 0 & lon===0)
                {
                    lat = 50.85;
                    lon = 4.35;
                }
                var latlng = new google.maps.LatLng(lat, lon);
                site_marker.setPosition(latlng);
                map.setCenter(latlng);
            }
      function createMarker(latlng,title,code) {
        var marker = new google.maps.Marker({
          map: map,
          title: title,
          position: latlng
        });
    
        google.maps.event.addListener(marker, 'click', function() {
          infowindow.setContent(code);
          infowindow.open(map, this);
        });
        google.maps.event.addListener(marker, 'click', function() {
          if (document.getElementById(code).checked) {
            document.getElementById(code).checked=false;
          } else {
            document.getElementById(code).checked=true;
          }
        });
    
    
        return marker;
      }
    
        </script>
      </head>
      <body onload="setupMap()">
        <div id="map-canvas-9" style="width: 800px; height: 300px;" class="easy-map-googlemap">
        </div>
        <table>
            <tr>
                <td>Latitude</td>
                <td><input id="id_latitude" max="90" min="-90" name="latitude" step="0.0001" type="number" /></td>
                <td></td>
                <td>In decimal degree, within [-90,90], max. 4 decimals, e.g. : 45.5 </td>
            </tr>
            <tr>
                <td>Longitude</td>
                <td><input id="id_longitude" max="180" min="-180" name="longitude" step="0.0001" type="number" /></td>
                <td></td>
                <td>In decimal degree, within [0,360], max. 4 decimals, e.g. : 12.3 </td>
            </tr>
            <tr>
                <td><button onclick="changeSitePosition()">Check site</button></td>
            </tr>
            <tr>
                <td><label for="check"><input name="stations" type="checkbox" id="(64080,99999)" /> Oostende</label></td>
            </tr>
            <tr>
                <td><label for="check"><input name="stations" type="checkbox" id="(64310,99999)" /> Gent</label></td>
            </tr>
            <tr>
                <td><label for="check"><input name="stations" type="checkbox" id="(64000,99999)" /> Koksijde</label></td>
            </tr>
            <tr>
                <td><label for="check"><input name="stations" type="checkbox" id="(64160,99999)" /> Wevelgem</label></td>
            </tr>
            <tr>
                <td><label for="check"><input name="stations" type="checkbox" id="(64340,99999)" /> Melle</label></td>
            </tr>
            <tr>
                <td><label for="check"><input name="stations" type="checkbox" id="(64470,99999)" /> Uccle</label></td>
            </tr>
            <tr>
                <td><label for="check"><input name="stations" type="checkbox" id="(64500,99999)" /> Antwerpen</label></td>
            </tr>
            <tr>
                <td><label for="check"><input name="stations" type="checkbox" id="(64640,99999)" /> Retie</label></td>
            </tr>
            <tr>
                <td><label for="check"><input name="stations" type="checkbox" id="(64630,99999)" /> Goetsenhoven</label></td>
            </tr>
            <tr>
                <td><label for="check"><input name="stations" type="checkbox" id="(64650,99999)" /> Schaffen</label></td>
            </tr>
            <tr>
                <td><label for="check"><input name="stations" type="checkbox" id="(64770,99999)" /> Diepenbeek</label></td>
            </tr>
            <tr>
                <td><label for="check"><input name="stations" type="checkbox" id="(64320,99999)" /> Chievres</label></td>
            </tr>
            <tr>
                <td><label for="check"><input name="stations" type="checkbox" id="(64780,99999)" /> Bierset</label></td>
            </tr>
            <tr>
                <td><label for="check"><input name="stations" type="checkbox" id="(64790,99999)" /> Kleine Brogel</label></td>
            </tr>
            <tr>
                <td><label for="check"><input name="stations" type="checkbox" id="(64590,99999)" /> Ernage</label></td>
            </tr>
        </table>
      </body>
    </html>
    

working example

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top