How To Write A Conditional To Detect Pegman Location And Create Popup Box In Googlemaps?

I'm working on a simple game in HTML and JavaScript using the GoogleMaps API. The code I have as of now displays the map view on the left side of the screen and street view on the

Solution 1:

The simplest way is to use the google.maps.geometry.spherical.computeDistanceBetween method. Set an arbitrary distance (1 meter is what I commonly use, but you might want to increase the tolerance (distance) to make it easier to be "there"). Looking at your existing code, pointA is over 100 meters from anywhere near a StreetView panorama (a 120 meter threshold works), while pointB seems to be pretty close to one (looks like 15 meters will work, but I didn't test that one).

proof of concept fiddle

code snippet:

var poly;
var map;
var pointA;
var pointB;
var infowindow_A;
var infowindow_B;

functioninitMap() {
    var mapDiv = document.getElementById('map');
    map = new google.maps.Map(mapDiv, {
      center: {
        lat: 30.565244,
        lng: -97.671010
      },
      zoom: 14
    });
    var svLayer = new google.maps.StreetViewCoverageLayer();
    svLayer.setMap(map);
    var txstate = {
      lat: 30.569858,
      lng: -97.655918
    };
    var panorama = new google.maps.StreetViewPanorama(
      document.getElementById('pano'), {
        position: txstate,
        pov: {
          heading: 34,
          pitch: 10
        }
      });
    google.maps.event.addListener(panorama, 'pano_changed', function() {
      addLatLng({
        latLng: panorama.getPosition()
      });
      if (!map.getBounds().contains(panorama.getPosition())) {
        map.setCenter(panorama.getPosition());
      }
    })
    map.setStreetView(panorama);

    poly = new google.maps.Polyline({
      strokeColor: '#000000',
      strokeOpacity: 1.0,
      strokeWeight: 3
    });
    poly.setMap(map);

    // Add a listener for the click event
    map.addListener('position_change', addLatLng);
  }
  // Handles click events on a map, and adds a new point to the Polyline.functionaddLatLng(event) {
  var path = poly.getPath();

  // Because path is an MVCArray, we can simply append a new coordinate// and it will automatically appear.
  path.push(event.latLng);

  //point A//hard-coded as Texas State University right nowvar image = "https://upload.wikimedia.org/wikipedia/commons/7/73/Farm-Fresh_star.png"; //STARif (!pointA) {
    pointA = new google.maps.Marker({
      position: {
        lat: 30.567989,
        lng: -97.655153
      },
      map: map,
      title: 'tx state',
      label: 'A',
      // animation: google.maps.Animation.DROP
    });
    var circle = new google.maps.Circle({
      map: map,
      radius: 120,
      center: pointA.getPosition()
    });
    var contentString_A = '<h5>texas state university at round rock</h5>';
    infowindow_A = new google.maps.InfoWindow({
      content: contentString_A
    });
    pointA.addListener('click', info_A);

  }

  functioninfo_A() {
    infowindow_A.open(map, pointA);
  }

  //point B//hard-coded as H-E-B right nowif (!pointB) {
    var pointB = new google.maps.Marker({
      position: {
        lat: 30.560619,
        lng: -97.688338
      },
      map: map,
      title: 'heb',
      label: 'B',
      //animation: google.maps.Animation.DROP
    });
    var circleB = new google.maps.Circle({
      map: map,
      radius: 15,
      center: pointB.getPosition()
    });

    var contentString_B = '<h5>h-e-b</h5>';
    infowindow_B = new google.maps.InfoWindow({
      content: contentString_B
    });
    pointB.addListener('click', info_B);
  }
  if (google.maps.geometry.spherical.computeDistanceBetween(pointB.getPosition(), event.latLng) < 15) {
    infowindow_B.open(map, pointB);
  } elseif (google.maps.geometry.spherical.computeDistanceBetween(pointA.getPosition(), event.latLng) < 120) {
    infowindow_A.open(map, pointA);
  }


  functioninfo_B() {
    infowindow_B.open(map, pointB);
  }

  functiontoggleBounce() {
    if (marker.getAnimation() !== null) {
      marker.setAnimation(null);
    } else {
      marker.setAnimation(google.maps.Animation.BOUNCE);
    }
  }

}
google.maps.event.addDomListener(window, "load", initMap);

html,
body {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
#map {
  height: 100%;
  width: 45%;
  float: left;
  margin: 0px;
  padding: 0px
}
#pano {
  height: 100%;
  width: 45%;
  margin: 0px;
  padding: 0px
}

<scriptsrc="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script><navclass="navbar navbar-default"><divclass="container"><divclass="navbar-header"><buttontype="button"class="navbar-toggle"data-toggle="collapse"data-target="#myNavbar"><spanclass="icon-bar"></span><spanclass="icon-bar"></span><spanclass="icon-bar"></span></button><aclass="navbar-brand"href="A2B.html">Home</a></div><divclass="collapse navbar-collapse"id="myNavbar"><ulclass="nav navbar-nav navbar-right"><li><ahref="#">Game</a></li><li><ahref="about_game.html">About the game</a></li><li><ahref="about_us.html">Developers</a></li></ul></div></div></nav><divid="map"></div><divid="pano"></div>