google map API一起显示标记和融合层

Question

Is it possibly to display marker and fusion layer at the same time on google map when click on check box?

This is what i have so far but it does not display anything when i click on the checkbox. It only display when i put var marker and var layer inside initMap() function. But not when I want to implement a check box

function initMap() {
    var myLatLng = {lat: 38.5816, lng: -121.4944};

    return new google.maps.Map(document.getElementById('map'), {
           zoom: 4,
          center: myLatLng
    });
}

var map = initMap();


$(document).ready(function () {
    // If city is clicked
    $(".city-marker").click(function () {

        if(this.checked == true) {
            var marker = new google.maps.Marker({
                position: {lat: 38.5816, lng: -121.4944},
                map: map
            });
         }
    })

    // If county is clicked
    $(".county-border").click(function () {
         if(this.checked == true) {
               var layer = new google.maps.FusionTablesLayer({
                   query: {
                            select: '05000US06001',
                            from: '196LqydLhOq1Wl9612hNhcGoh4vUmRjTaiFvDhA',
                            where: "'County Name' = 'San Francisco'"
                          }
               });
              layer.setMap(map);
          }
     })
})

https://jsfiddle.net/tuyenle/j2rc2zvu/2/

Answer 1

The problem with your code is, that you are loading google maps asynchronously (notice the async and defer tags) on this line:

<script async defer
src="https://maps.googleapis.com/maps/api/js?key=...&callback=initMap">
</script>

So only after it's loaded you can create the map and add Marker / Fusion Layer. When it's loaded it would call initMap function (notice callback=initMap in the link) So when adding the marker, you should check if the map objects exist, one of possible solutions might something like this:

var map = null;
function initMap() { //is called when google maps api is loaded
    var myLatLng = {lat: 38.5816, lng: -121.4944};

    map = new google.maps.Map(document.getElementById('map'), {
           zoom: 4,
          center: myLatLng
    });
}

$(document).ready(function () {
    // If city is clicked
    $(".city-marker").click(function () {
        if(map == null){ //at this point the Google maps api is still not loaded, you can maybe display a loading bar or disable the checkboxes unit it is. Anyway, this will almost never happen if user is not on very very slow internet connection.
            console.log("Google maps not loaded yet"); 
            return;
        }
        if(this.checked == true) {
            var marker = new google.maps.Marker({
                position: {lat: 38.5816, lng: -121.4944},
                map: map
            });
         }
    });

    // If county is clicked
    $(".county-border").click(function () {
         if(map == null){
            console.log("Google maps not loaded yet"); 
            return;
        }
        if(this.checked == true) {
               var layer = new google.maps.FusionTablesLayer({
                   query: {
                            select: '05000US06001',
                            from: '196LqydLhOq1Wl9612hNhcGoh4vUmRjTaiFvDhA',
                            where: "'County Name' = 'San Francisco'"
                          }
               });
              layer.setMap(map);
          }
     })
});