Geolocation Street View by Address

by Annie Lagang

HTML

<div id="floating-panel">
  <input id="address" type="text" value="115 Don Carlos Palanca, Legazpi Village, Makati">
  <input id="submit" type="button" value="Find">
</div>
<div id="map"></div>
<!-- 
Replace the value of the key parameter with your own API key. 
Google allows your web site to call any Google API, many thousand times per day.
If you plan for heavier traffic, you should get a free API key from Google.
-->
<!--<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>-->

<!--
If you are using the Google Maps API on localhost or your domain was not active prior to June 22nd, 2016, it will require a key going forward. To fix this problem, please see the Google Maps APIs documentation to get a key and add it to your application: https://developers.google.com/maps/documentation/javascript/get-api-key
-->
<script async defer
src="https://maps.googleapis.com/maps/api/js?callback=initMap">
</script>

CSS

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#map {
  height: 100%;
}
#floating-panel {
  position: absolute;
  top: 10px;
  left: 25%;
  z-index: 5;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #999;
  text-align: center;
  font-family: 'Roboto','sans-serif';
  line-height: 30px;
  padding-left: 10px;
}
#floating-panel {
  position: absolute;
  top: 5px;
  left: 50%;
  margin-left: -180px;
  width: 350px;
  z-index: 5;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #999;
}
#latlng {
  width: 225px;
}

JavaScript

function initMap() {
  var latlng = new google.maps.LatLng(0, 0);
  var map = new google.maps.Map(document.getElementById('map'), {
    center: latlng,
    zoom: 18,
    //streetViewControl: false
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
  
  var geocoder = new google.maps.Geocoder;
  var infowindow = new google.maps.InfoWindow;

  document.getElementById('submit').addEventListener('click', function() {
    geocodeLatLng(geocoder, map, infowindow);
  });
}

function geocodeLatLng(geocoder, map, infowindow) {
  var address = document.getElementById('address').value;
  geocoder.geocode({'address': address}, function(results, status) {
    if (status === google.maps.GeocoderStatus.OK) {
      if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
      	var latlng = results[0].geometry.location;
        map.setCenter(latlng);
        map.setZoom(18);
        var marker = new google.maps.Marker({
            position: latlng,
            map: map,
            title: "You are here!"
        });
        infowindow.setContent(results[0].formatted_address);
        infowindow.open(map, marker);
      } else {
        window.alert('No results found');
      }
    } else {
      window.alert('Geocoder failed due to: ' + status);
    }
  });
}