CODEWITHSUNDEEP
javascriptjquerygoogle-mapsgoogle-maps-api-3
Michael B
Michael B

Reputation: 1699

Set marker on Google Map when changing a checkbox

I need some help regarding the Google Maps API. I was able to initialize the map. Now I want to add some markers to it. I have a set of checkboxes (they are called "networks"). Each checkbox has a hidden longitude and latitude field. If the checkbox is checked, a marker should be displayed on the map I managed to do this with the detour, of clicking on the map. But I want to trigger the creation of new markers on change of the checkbox.

Here is how it works, when I click on the map the markers appear:

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 6,
    center: {lat: 48.7791, lng: 9.0367}
  });

  google.maps.event.addListener(map, "click", function(event) {

    //Get all checked Networks
    var checked_network = $( ".checkbox-network:checked" );
    checked_network.each(function(){
      network_id = $( this ).data("network-id");
      //Get the hidden location longitudes and latitudes for each checked network element
      network_locations_latitude = $(".location_latitude_network_"+network_id).val();
      network_locations_longitude = $(".location_longitude_network_"+network_id).val();
      var marker = new google.maps.Marker({
          position: new google.maps.LatLng(network_locations_latitude,network_locations_longitude),
          map: map
       });
    });
  });
}

Here is how I try to get it to work, with clicking on the checkboxes. Unfortunately nothing happens. The marker object shows up in the JavaScript console, but on the map no markers appear.

$(document).on('change','.checkbox-network', function() {
    var checked_network = $( ".checkbox-network:checked" );
    checked_network.each(function(){
      network_id = $( this ).data("network-id");

      //Get the hidden location longitudes and latitudes for each checked network element
      network_locations_latitude = $(".location_latitude_network_"+network_id).val();
      network_locations_longitude = $(".location_longitude_network_"+network_id).val();
      console.log(network_id + " - " + network_locations_latitude);
      var marker = new google.maps.Marker({
          position: new google.maps.LatLng(network_locations_latitude,network_locations_longitude),
          map: map,
          title: "test"
       });
      console.log(marker);
    });
});

What am I missing? How can I show the markers in the google-map with the onchangeevent of the checkboxes?

Upvotes: 1

Views: 783

Answers (2)

RGS
RGS

Reputation: 5211

You have to initialize map variable globally. Currently scope of map variable only available inside initMap() function.

var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 6,
        center: {lat: 48.7791, lng: 9.0367}
});
$(document).on('change','.checkbox-network', function() {
   var checked_network = $( ".checkbox-network:checked" );
   checked_network.each(function(){
    network_id = $( this ).data("network-id");
       //Get the hidden location longitudes and latitudes for each checked network element
    network_locations_latitude = $(".location_latitude_network_"+network_id).val();
    network_locations_longitude = $(".location_longitude_network_"+network_id).val();
    console.log(network_id + " - " + network_locations_latitude);
    var marker = new google.maps.Marker({
              position: new google.maps.LatLng(network_locations_latitude,network_locations_longitude),
              map: map,
              title: "test"
    });
    console.log(marker);
   });
});

Upvotes: 3

Adam Azad
Adam Azad

Reputation: 11297

In the second snippet of your code, the map isn't defined because it's been defined in the scope of initMap(). I wonder why Google doesn't throw any errors.

change your initMap like below; move the map object to the global scope to be accessible from all scope (I always use this for my own projects)

initMap() {

  window.map = new google.maps.Map(document.getElementById('map'), {
    zoom: 6,
    center: {lat: 48.7791, lng: 9.0367}
  });

}

Here you should be more logical with the name map, so replace it with another name to avoid further conflicts.

Upvotes: 1

Related Questions