JSFiddle - React, Tailwind, and code Playground

by fangyang

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;libraries=places"></script>
<div id="map-canvas"></div>

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: 'ChIJ4yANjzt1aYgRye7agtQLylA'
    }, function (result, status) {
        if (status != google.maps.places.PlacesServiceStatus.OK) {
            alert(status);
            return;
        }
        var marker = new google.maps.Marker({
            map: map,
            place: {
                placeId: 'ChIJN1t_tDeuEmsRUsoyG83frY4',
                location: result.geometry.location
            }
        });
        // map.setCenter(marker.getPosition());
        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);

    });

}

google.maps.event.addDomListener(window, 'load', initialize);