JSFiddle - React, Tailwind, and code Playground

by Andy Mcloughlin

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<div id="map" style="width: 500px; height: 400px;"></div>
<p id="enjoy"></p>
<p id="LocationComment"></p>

JavaScript

// google places API JSON data
// i would probally put this in a seperate file and call it from the javascript
var Locations = [{
    "formatted_address": "11 Saint Clair Avenue West, Toronto, ON M4V 1K6, Canada",
        "location": {
        "lat": 43.6878918,
            "lng": -79.3946332
    },
        "address_components": [{
        "long_name": "11",
            "short_name": "11",
            "types": ["street_number"]
    }, {
        "long_name": "Saint Clair Avenue West",
            "short_name": "St Clair Ave W",
            "types": ["route"]
    }, {
        "long_name": "Midtown Toronto",
            "short_name": "Midtown Toronto",
            "types": ["neighborhood", "political"]
    }, {
        "long_name": "Old Toronto",
            "short_name": "Old Toronto",
            "types": ["sublocality", "political"]
    }, {
        "long_name": "Toronto",
            "short_name": "Toronto",
            "types": ["locality", "political"]
    }, {
        "long_name": "Toronto Division",
            "short_name": "Toronto Division",
            "types": ["administrative_area_level_2", "political"]
    }, {
        "long_name": "Ontario",
            "short_name": "ON",
            "types": ["administrative_area_level_1", "political"]
    }, {
        "long_name": "Canada",
            "short_name": "CA",
            "types": ["country", "political"]
    }, {
        "long_name": "M4V 1K6",
            "short_name": "M4V 1K6",
            "types": ["postal_code"]
    }]

}, {
    "formatted_address": "6 Pirandello Street, Toronto, ON M6K, Canada",
        "location": {
        "lat": 43.6399587,
            "lng": -79.41446049999999
    },
        "address_components": [{
        "long_name": "6",
            "short_name": "6",
            "types": ["street_number"]
    }, {
        "long_name": "Pirandello Street",
            "short_name": "Pirandello St",
            "types": ["route"]
    }, {
        "long_name": "King West Village",
        ...