JSFiddle - React, Tailwind, and code Playground

by Lawrence Ross

HTML

<script src="https://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=geometry,places&amp;key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map-canvas" style="width:500px; height:400px"></div>

CSS

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

JavaScript

var placeid_json = [{
    "placeid": 'ChIJu6HrLMVWIkcRWHTA90kiueI',
    "content": "   1   "
}, {
    "placeid": 'ChIJnXBuJ34zGUcRvt9FTKrPeeM',
    "content": "   2   "
}, {
    "placeid": 'ChIJiwUNhqX7PEcRdJjYqzrWYjs',
    "content": "   3   "
}];


var openedInfoWindow = null;

function initialize() {
    var latitude = 51.9315631,
        longitude = 19.473451,
        radius = 8000,
        center = new google.maps.LatLng(latitude, longitude),
        mapOptions = {
            center: center,
            zoom: 5,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            scrollwheel: false
        };

    var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

    setMarkers(center, radius, map);
}

function setMarkers(center, radius, map) {
    /* var json = (function () { 
            var json = null; 
            $.ajax({ 
                'async': false, 
                'global': false, 
                'url': "placeid.json", 
                'dataType': "json", 
                'success': function (data) {
                     json = data; 
                 }
            });
            return json;
        })(); */

    var json = placeid_json;
    for (var i = 0, length = json.length; i < length; i++) {
        var data = json[i];
        createMarker(data, map);
    }
}
function createMarker(data, map) {
            var service = new google.maps.places.PlacesService(map);
        service.getDetails({
            placeId: data.placeid
        }, function (result, status) {
            if (status != google.maps.places.PlacesServiceStatus.OK) {
                alert(status);
                return;
            }
            var marker = new google.maps.Marker({
                map: map,
                place: {
                    placeId: data.placeid,
                    location: result.geometry.location
                }
                //position: result.geometry.location
            });
            infoBox(map,...