JSFiddle - React, Tailwind, and code Playground

by Lawrence Ross

HTML

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

CSS

html,
body,
#map-canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

JavaScript

var map;
var infoWindow;
var service;


function initialize() {
  var mapOptions = {
    zoom: 19,
    center: new google.maps.LatLng(51.257195, 3.716563),
    styles: [{
      featureType: "poi",
      elementType: "labels",
      stylers: [{
        visibility: "off"
      }]
    }]
  };
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  infoWindow = new google.maps.InfoWindow();
  var service = new google.maps.places.PlacesService(map);
  service.getDetails({
    placeId: 'ChIJN1t_tDeuEmsRUsoyG83frY4'
  }, function(result, status) {
    if (status != google.maps.places.PlacesServiceStatus.OK) {
      alert(status);
      return;
    }
    console.log(result);
    var marker = new google.maps.Marker({
      map: map,
      place: {
        placeId: 'ChIJN1t_tDeuEmsRUsoyG83frY4',
        location: result.geometry.location
      }
    });
    console.log(result.geometry.location.toUrlValue(6));
    map.setCenter(result.geometry.location);
    var address = result.adr_address;
    var newAddr = address.split("</span>,");

    infoWindow.setContent(result.name + "<br>" + newAddr[0] + "<br>" + newAddr[1] + "<br>" + newAddr[2]);
    google.maps.event.addListener(infoWindow, 'domready', function() {
      map.setCenter(marker.getPosition());
    });
    infoWindow.open(map, marker);

  });

}