'Alert Box with Marker Google Maps API

I currently have a marker called chicagoMarker and I created an event listener for this. I am having trouble getting an alert box to appear each time the user gets closer to my city. Here is what I have:

    <!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      var map;
      var score;
      score = 0;
      function initMap() {
        var chicago = {lat: 41.8781, lng: -87.6298};
        var indianapolis = {lat: 39.7684, lng: -86.1581};
        var oklahomaCity = {lat: 35.4819, lng: -97.5084};
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: 0.0, lng: 0.0},
          zoom: 1
});
        var chicagoMarker = new google.maps.Marker({
            position: chicago,  


});

        var oklahomaCityMarker = new google.maps.Marker({
            position: oklahomaCity,
});

        var indianapolisMarker = new google.maps.Marker({
            position: indianapolis,

});

if (score==0) {
    chicagoMarker.setMap(map);
    map.getZoom();
    google.maps.event.addListener(chicagoMarker,'bounds_changed',function(){
        if (map.getBounds().contains(chicagoMarker)){
            alert("Good Job");
        }
        if (zoom == 8 && map.getBounds.contains(chicagoMarker)){
            window.alert("You have found city 1!");
            score = score + 1;
        }
    })

};

if (score==1) {
    oklahomaCityMarker.setMap(map)
}

if (score==2) {
    indianapolisMarker.setMap(map)
}


chicagoMarker.setVisible(false);
indianapolisMarker.setVisible(false);
oklahomaCityMarker.setVisible(false);
    }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCuvsCAF0gVmwv6AF0SoA3xBjV66RG4r7o&callback=initMap"
    async defer></script>
  </body>
</html>

Solution 1:^[1]

You are not able to check if the map contains the marker because you're missing .getPosition() (the method contains() of the class google.maps.LatLng takes a LatLng and not a marker as an argument)

So change the line

if (map.getBounds().contains(chicagoMarker)){

to

if (map.getBounds().contains(chicagoMarker.getPosition())){

You might also use something like

map.addListener('bounds_changed',function(){

to add the event listener to the map (in place of google.maps.event.addListener(chicagoMarker ...

I changed a few things to make your script work, you can find the result in this snippet. Now the city is found when the zoom is greater than 10.

var map;
      var score;
      score = 0;
      function initMap() {
        var chicago = {lat: 41.8781, lng: -87.6298};
        var indianapolis = {lat: 39.7684, lng: -86.1581};
        var oklahomaCity = {lat: 35.4819, lng: -97.5084};
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: 0.0, lng: 0.0},
          zoom: 10
});
        var chicagoMarker = new google.maps.Marker({
            position: chicago,  


});

        var oklahomaCityMarker = new google.maps.Marker({
            position: oklahomaCity,
});

        var indianapolisMarker = new google.maps.Marker({
            position: indianapolis,

});

if (score==0) {
    chicagoMarker.setMap(map);
    
    map.addListener('bounds_changed',function(){
        zoom = map.getZoom();
        console.log(zoom);
        if (zoom >=10 && map.getBounds().contains(chicagoMarker.getPosition())){
            window.alert("You have found city 1!");
            score = score + 1;
        }
    })

};

if (score==1) {
    oklahomaCityMarker.setMap(map)
}

if (score==2) {
    indianapolisMarker.setMap(map)
}


chicagoMarker.setVisible(false);
indianapolisMarker.setVisible(false);
oklahomaCityMarker.setVisible(false);
    }

#map {
        height: 80%;
      }
   
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1

'Alert Box with Marker Google Maps API

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]