PlaceID Finder

by Lawrence Ross

HTML

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

CSS

#map {
  height: 100%;
}

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

.controls {
  background-color: #fff;
  border-radius: 2px;
  border: 1px solid transparent;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
  font-family: Roboto;
  font-size: 15px;
  font-weight: 300;
  height: 29px;
  margin-left: 17px;
  margin-top: 10px;
  outline: none;
  padding: 0 11px 0 13px;
  text-overflow: ellipsis;
  width: 400px;
}

.controls:focus {
  border-color: #4d90fe;
}

.title {
  font-weight: bold;
}

#infowindow-content {
  display: none;
}

#map #infowindow-content {
  display: inline;
}

JavaScript

function initMap() {
  var infowindow = new google.maps.InfoWindow();
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: -33.8688,
      lng: 151.2195
    },
    zoom: 18
  });

  var RoyalSq = new google.maps.Marker({
    placeId: "ChIJvfdyRztP4DsRfSKksTGiGWs",
    position: {
      lat: 21.232947,
      lng: 72.864397
    },
    map: map
  });
  RoyalSq.addListener('click', function(evt) {
    infowindow.setContent('<div class="poi-info-window gm-style"> <div jstcache="2"> <div class="title full-width" >Royal Square</div> <div class="address"> <div class="address-line full-width">Uttran</div><div class="address-line full-width" >Surat, Gujarat 394105</div><div class="address-line full-width">India</div> </div> </div> <div style="display:none"></div> <div class="view-link"> <a target="_blank" href="https://maps.google.com/maps?ll=21.233067,72.864432&amp;z=20&amp;t=m&amp;hl=en-US&amp;gl=US&amp;mapclient=apiv3&amp;cid=7717377770793476733"> <span> View on Google Maps </span> </a> </div> </div>');
    infowindow.open(map, RoyalSq);
  })
  google.maps.event.trigger(RoyalSq, 'click');
  map.setCenter(RoyalSq.getPosition());
  var noPoi = [{
    featureType: "poi",
    elementType: "labels",

    stylers: [{
      visibility: "off"
    }]
  }];

  map.setOptions({
    styles: noPoi
  });
}