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;ext=.js"></script>
<div id="map-result"></div>

CSS

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

JavaScript

var map = new google.maps.Map(document.getElementById('map-result'), {
    zoom: 6,
    center: new google.maps.LatLng(52.999085, -2.833751),
    mapTypeId: google.maps.MapTypeId.ROADMAP
});

var locations = [
    ['title', 42, -72, 'http://maps.google.com/mapfiles/ms/micons/blue.png'],
    ['Bondi Beach', -33.890542, 151.274856, 'http://maps.google.com/mapfiles/ms/micons/blue.png'],
    ['Coogee Beach', -33.923036, 151.259052, 'http://maps.google.com/mapfiles/ms/micons/blue.png'],
    ['Cronulla Beach', -34.028249, 151.157507, 'http://maps.google.com/mapfiles/ms/micons/blue.png'],
    ['Manly Beach', -33.80010128657071, 151.28747820854187, 'http://maps.google.com/mapfiles/ms/micons/blue.png'],
    ['Maroubra Beach', -33.950198, 151.259302, 'http://maps.google.com/mapfiles/ms/micons/blue.png']
];
var infowindow = new google.maps.InfoWindow();

var marker, i;
var bounds = new google.maps.LatLngBounds();
for (i = 0; i < locations.length; i++) {
    marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        icon: locations[i][3],
        map: map
    });
    bounds.extend(marker.getPosition());
    google.maps.event.addListener(marker, 'click', (function (marker, i) {
        return function () {
            infowindow.setContent(locations[i][0]);
            infowindow.open(map, marker);
        }
    })(marker, i));
}
map.fitBounds(bounds);