JSFiddle - React, Tailwind, and code Playground

by wilsonjonash

HTML

<script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;extension=.js"></script>
<div id="map"></div>

CSS

#map {
     height: 500px;
     width: 500px;
 }

JavaScript

jQuery(document).ready(function () {
    var map;
    var centerPosition = new google.maps.LatLng(54.508869, -6.292547);

    var options = {
        zoom: 16,
        center: centerPosition,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map($('#map')[0], options);
    $.each(points,function(index,point){
        var latlng = new google.maps.LatLng(point.lat, point.lng);
        var marker = new google.maps.Marker({
            position: latlng,
            map: map,
            title: point.FORENAME
        });
    });
});

var points = [{"lat":"54.508869","lng":"-6.292547","FORENAME":"Ellen","SURNAME":"Wetherall"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"Annie","SURNAME":"Beckett"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"William","SURNAME":"Beckett"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"John","SURNAME":"Wetherall"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"Henretta","SURNAME":"Wetheral"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"Mark","SURNAME":"Wetherall"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"Thomas","SURNAME":"Wetherall"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"Robert John","SURNAME":"Wetherall"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"Thomas","SURNAME":"Wetherall"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"Lizzie","SURNAME":"Wetherall"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"Sarah","SURNAME":"Thompson"},{"lat":"54.508869","lng":"-6.292547","FORENAME":"Mary...