I can not see the KML layers I want to implement on my site through Google Maps

Question

I can not see the KML layers I want to implement on my site through Google Maps

Navigation

#1 by (0 votes)

0

What I want is that when you click on a check, the KML layer appears with all its data. This code was taken here . But it is not displayed to me and I also get an error in the console "Uncaught ReferenceError: $ is not defined"

<script>
    var map;

    // lets define some vars to make things easier later
    var kml = {
        a: {
            name: "MPLS/STPL",
            url: "https://maps.google.com/maps/ms?authuser=0&vps=5&ie=UTF8&msa=0&output=kml&msid=212971981154994583939.0004b06640255267e038c"
        },
        b: {
            name: "Bicycling Tour Routes",
            url: "https://maps.google.com/maps/ms?authuser=0&vps=4&ie=UTF8&msa=0&output=kml&msid=212971981154994583939.0004902a1824bbc8c0fe9"
        },
        c: {
            name: "areas verdes",
            url: "kml/areas_verdes.kml"
        }
        // keep adding more if ye like 
    };


    // initialize our goo
    function initializeMap() {
        var options = {
            center: new google.maps.LatLng(-33.4488897, -70.6692655),
            zoom: 10,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(document.getElementById("map_canvas"), options);
        createTogglers();
    };
    google.maps.event.addDomListener(window, 'load', initializeMap);

    // the important function... kml[id].xxxxx refers back to the top 
    function toggleKML(checked, id) {

        if (checked) {

            var layer = new google.maps.KmlLayer(kml[id].url, {
                preserveViewport: true,
                suppressInfoWindows: true
            });
            // store kml as obj
            kml[id].obj = layer;
            kml[id].obj.setMap(map);
        } else {
            kml[id].obj.setMap(null);
            delete kml[id].obj;
        }

    };

    // create the controls dynamically because it's easier, really
    function createTogglers() {

        var html = "<form><ul>";
        for (var prop in kml) {
            html += "<li id=\"selector-" + prop + "\"><input type='checkbox' id='" + prop + "'" +
                " onclick='highlight(this,\"selector-" + prop + "\"); toggleKML(this.checked, this.id)' \/>" +
                kml[prop].name + "<\/li>";
        }
        html += "<li class='control'><a href='#' onclick='removeAll();return false;'>" +
            "Remove all layers<\/a><\/li>" +
            "<\/ul><\/form>";

        document.getElementById("toggle_box").innerHTML = html;
    };

    // easy way to remove all objects
    function removeAll() {
        for (var prop in kml) {
            if (kml[prop].obj) {
                kml[prop].obj.setMap(null);
                delete kml[prop].obj;
            }

        }
    };

    // Append Class on Select
    function highlight(box, listitem) {
        var selected = 'selected';
        var normal = 'normal';
        document.getElementById(listitem).className = (box.checked ? selected : normal);
    };

    function startup() {
        // for example, this toggles kml b on load and updates the menu selector
        var checkit = document.getElementById('b');
        checkit.checked = true;
        toggleKML(checkit, 'b');
        highlight(checkit, 'selector1');
    }
    $(document).ready(function() {
        startup();
    });

</script>

google-maps

asked by andres valdes navarrete 06.02.2018 в 20:51

source

1 answer

IONIC 3 generating apk android Calculation of table with Jquery

score 0 · Answer 1

You have several problems.

Apparently you are not loading jQuery in your document. (On the other hand, you should not need it)

Declare the global variable map and then redefine it within the function initializeMap . This is called shadowing and affects the variable in the context of the function, but the global map remains unchanged and has value undefined . Then when doing layer.setMap(map) you are not really passing the value of your map instance. Remove the var when instantiating the map.

The relative url of your third element is not visible to google maps. It has to be a publicly visible file for Google to parse it and return it as a layer. You should put the absolute url of your kml.

Even if you have jQuery loaded, when you call startup before the checkboxes exist, you will try to activate an element that does not exist yet. Better to remove the use of jQuery, and all that block together with the startup function.

If you want to visualize the first two KML that you have listed, do not put preserveViewport because the map will remain where it is and the KML will light up in a place on the other side of the world.

var map;

    // lets define some vars to make things easier later
    var kml = {
        a: {
            name: "MPLS/STPL",
            url: "https://maps.google.com/maps/ms?authuser=0&vps=5&ie=UTF8&msa=0&output=kml&msid=212971981154994583939.0004b06640255267e038c"
        },
        b: {
            name: "Bicycling Tour Routes",
            url: "https://maps.google.com/maps/ms?authuser=0&vps=4&ie=UTF8&msa=0&output=kml&msid=212971981154994583939.0004902a1824bbc8c0fe9"
        },
        c: {
            name: "areas verdes",
            url: "kml/areas_verdes.kml"
        }
        // keep adding more if ye like 
    };


    // initialize our goo
    function initializeMap() {
        var options = {
            center: new google.maps.LatLng(-33.4488897, -70.6692655),
            zoom: 10,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        map = new google.maps.Map(document.getElementById("map_canvas"), options);
        createTogglers();
    };
    google.maps.event.addDomListener(window, 'load', initializeMap);

    // the important function... kml[id].xxxxx refers back to the top 
    function toggleKML(checked, id) {
        if (checked) {

            var layer = new google.maps.KmlLayer(kml[id].url, {
                preserveViewport: false,
                suppressInfoWindows: true
            });
             
            // store kml as obj
            kml[id].obj = layer;
            kml[id].obj.setMap(map);
        } else {
            kml[id].obj.setMap(null);
            delete kml[id].obj;
        }

    };

    // create the controls dynamically because it's easier, really
    function createTogglers() {

        var html = "<form><ul>";
        for (var prop in kml) {
            html += "<li id=\"selector-" + prop + "\"><input type='checkbox' id='" + prop + "'" +
                " onclick='highlight(this,\"selector-" + prop + "\"); toggleKML(this.checked, this.id)' \/>" +
                kml[prop].name + "<\/li>";
        }
        html += "<li class='control'><a href='#' onclick='removeAll();return false;'>" +
            "Remove all layers<\/a><\/li>" +
            "<\/ul><\/form>";

        document.getElementById("toggle_box").innerHTML = html;
    };

    // easy way to remove all objects
    function removeAll() {
        for (var prop in kml) {
            if (kml[prop].obj) {
                kml[prop].obj.setMap(null);
                delete kml[prop].obj;
            }

        }
    };

    // Append Class on Select
    function highlight(box, listitem) {
        var selected = 'selected';
        var normal = 'normal';
        document.getElementById(listitem).className = (box.checked ? selected : normal);
    };

#map_canvas {
width:100%;
height:400px;
}

 
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry&key=AIzaSyAvBQ1Q9FjYfxdWJF6KPmO822RMMbY2w2o"></script>


<div id="toggle_box">

</div>
<div id="map_canvas">

</div>