JSFiddle - React, Tailwind, and code Playground

by Lawrence Ross

HTML

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&amp;ext=.js"></script>
<h1 style="text-align: center;">Hello World</h1>

<div id="map"></div>
<ul id="list"></ul>

CSS

#map {
    height: 300px;
    width: 600px;
    border: 1px solid black;
    margin: 0 auto;
}

JavaScript

function initialize() {
    var mapProp = {
        center: new google.maps.LatLng(38, -78),
        zoom: 6,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById('map'), mapProp);
    return map;
};

$(document).ready(function () {
    var url = 'https://opendata.howardcountymd.gov/resource/96q9-qbh7.json';
    var map = initialize();
    $.getJSON(url, function (data) {
        $.each(data, function (i, field) {
            $('#list').append("<li>" + data[i].location.longitude + " & " + data[i].location.latitude + "</li>");
            createMarker(data);

            function createMarker(data) {
                var marker = new google.maps.Marker({
                    position: new google.maps.LatLng(data[i].location.latitude, data[i].location.longitude),
                    map: map,
                    title: field.crossroad
                });
            };
        });
    });

});