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;

function initMap() {
    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.

function addLatLng(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 now
  var image = "https://upload.wikimedia.org/wikipedia/commons/7/73/Farm-Fresh_star.png"; //STAR
  if (!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);

  }

  function info_A() {
    infowindow_A.open(map, pointA);
  }

  //point B
  //hard-coded as H-E-B right now
  if (!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);
  } else if (google.maps.geometry.spherical.computeDistanceBetween(pointA.getPosition(), event.latLng) < 120) {
    infowindow_A.open(map, pointA);
  }


  function info_B() {
    infowindow_B.open(map, pointB);
  }

  function toggleBounce() {
    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
}

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


</nav>

<div id="map"></div>
<div id="pano"></div>