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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div id="map-canvas" style="border: 2px solid #3872ac;"></div>

CSS

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

JavaScript

var map = null;
var bounds = new google.maps.LatLngBounds();
 function addMarker(lat, lng) {
     marker = new google.maps.Marker({
         position: new google.maps.LatLng(lat, lng),
         map: map
     });
     bounds.extend(marker.getPosition());
 }


 function initialize() {
     var mapOptions = {
         center: {
             lat: 54.872128,
             lng: -6.284874
         },
         zoom: 13
     };
     map = new google.maps.Map(document.getElementById('map-canvas'),
     mapOptions);

     $(document).ready(function () {
         new Request.JSON({
             url: '/echo/json/',
             data: {
                 json: JSON.encode([{lat: 40.7127837, lng:-74.0059413},
                                    {lat:40.735657, lng:-74.1723667}]),
                 delay: 5
             },
             onSuccess: function (data) {
                 var locations = data; //JSON.parse(data);

                 for (var i = 0; i < locations.length; i++) {
                     addMarker(locations[i].lat, locations[i].lng);
                 }
                 map.fitBounds(bounds);
             }
         }).send();


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