Home/ Questions/Q 8714645
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T05:38:54+00:00

I am new to Google Maps. I have a Google Maps v3 map added

  • 0

I am new to Google Maps. I have a Google Maps v3 map added to an aspx file in an ASP.NET 4.0 project and am attempting to add toggle checkboxes for the four KML layers that I have on the map.

When I click on the checkbox, however, I get this error: “Microsoft JScript runtime error: Unable to get value of the property ‘setMap’: object is null or undefined”. Thank you!

Here is the HTML:

<body onload="initialize()">    
        <div id="map-canvas" style="width:100%; height:90%;"></div>
        <div id="legend">
            <div class="column">
                <input type="checkbox" id="landmarksLayer" onclick="toggleKMLLayer(this,'Notable Locations');" checked="checked" />Notable Locations (<img alt="yellow dot" src="Images/GoogleMaps/yellow-dot.png" />)
            </div>
        </div>
    </body>

Here is the Javascript:

    <%--Javascript--%>
    <script type="text/JavaScript" src="http://maps.googleapis.com/maps/api/js?key=[I_Removed_My_Key]&sensor=false"></script>

    <script type="text/javascript">

        var infowindow = new google.maps.InfoWindow({ "maxWidth": 100 });

        var map;

        var landmarksLayer;
        var publicArtLayer;
        var blueEmergencyPhonesLayer;
        var buildingsLayer;

        //toggle
        function toggleKMLLayer(chkbox, kmlLayerID) {

            //window.alert(kmlLayerID);

            if (chkbox.checked) {
                //window.alert("checked");
                landmarksLayer.setMap(map);
            }
            else {
                //window.alert("unchecked");
                landmarksLayer.setMap(null);
            }
        }

        function initialize() {

            var mapOptions = {
                center: new google.maps.LatLng(33.585737, -101.884804),
                zoom: 15,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };

            map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

            var kmlLayerOptions = {
                preserveViewport: true,
                suppressInfoWindows: true
            };

            var landmarksLayer = new google.maps.KmlLayer('http://www.ttu.edu/map/points/landmarks.xml', kmlLayerOptions);
            landmarksLayer.setMap(map);

            var publicArtLayer = new google.maps.KmlLayer('http://www.ttu.edu/map/points/art.xml', kmlLayerOptions);
            publicArtLayer.setMap(map);

            var blueEmergencyPhonesLayer = new google.maps.KmlLayer('http://www.ttu.edu/map/points/emergency.xml', kmlLayerOptions);
            blueEmergencyPhonesLayer.setMap(map);

            var buildingsLayer = new google.maps.KmlLayer('http://www.ttu.edu/map/points/bldgs.xml', kmlLayerOptions);
            buildingsLayer.setMap(map);


            addKmlClickHandler(landmarksLayer);
            addKmlClickHandler(publicArtLayer);
            addKmlClickHandler(blueEmergencyPhonesLayer);
            addKmlClickHandler(buildingsLayer);
        }

        // create a new info window for the KML (outage) layer and the geo-coded house marker
        function addKmlClickHandler(KmlLayer) {
            google.maps.event.addListener(KmlLayer, "click", function (event) {
                infowindow.close();
                infowindow.setOptions({
                    pixelOffset: event.pixelOffset,
                    content: event.featureData.infoWindowHtml,
                    position: event.latLng
                });
                infowindow.open(map);
            });
        }

    </script>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You are creating global variables for your layers:

        var landmarksLayer;
    var publicArtLayer;
    var blueEmergencyPhonesLayer;
    var buildingsLayer;

    but you aren’t using them (inside your initialize function):

        var landmarksLayer = new google.maps.KmlLayer('http://www.ttu.edu/map/points/landmarks.xml', kmlLayerOptions);
    landmarksLayer.setMap(map);

    var publicArtLayer = new google.maps.KmlLayer('http://www.ttu.edu/map/points/art.xml', kmlLayerOptions);
    publicArtLayer.setMap(map);

    var blueEmergencyPhonesLayer = new google.maps.KmlLayer('http://www.ttu.edu/map/points/emergency.xml', kmlLayerOptions);
    blueEmergencyPhonesLayer.setMap(map);

    var buildingsLayer = new google.maps.KmlLayer('http://www.ttu.edu/map/points/bldgs.xml', kmlLayerOptions);
    buildingsLayer.setMap(map);

    The “var” in front of the variable there creates a new version of the variable that is local to the initialize function, leaving the global version uninitialized. You need the global version initialized so you can use it in your HTML click listener (which executes in the global context).

    • 0