JSFiddle - React, Tailwind, and code Playground

by Lawrence Ross

HTML

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
<div id="map" style="width:640px;height:480px;"></div>
<div class="map-notice">
    <span>Getting your current location</span>
</div>

JavaScript

var sampleJSON = '{\
    "id": "10",\
    "title": "This is an example",\
    "href": "http:\/\/website.com\/posts\/This_is_an_example-10",\
    "location": {\
        "latitude": "53.396432",\
        "longitude": "-1.494141"\
    },\
    "author": {\
        "name": "John Doe",\
        "avatar": "http:\/\/2.gravatar.com\/avatar\/767fc9c115a1b989744c755db47feb60?s=132&d=wavatar"\
    }\
},\
{\
    "id": "320",\
    "title": "This is another example",\
    "href": "http:\/\/website.com\/posts\/This_is_another_example-320",\
    "location": {\
        "latitude": "53.396432",\
        "longitude": "-1.494141"\
    },\
    "author": {\
        "name": "John Doe",\
        "avatar": "http:\/\/2.gravatar.com\/avatar\/767fc9c115a1b989744c755db47feb60?s=132&d=wavatar"\
    }\
}';

var map;

function initialize() {

    var myOptions = {
        zoom: 15,
        panControl: false,
        zoomControl: true,
        zoomControlOptions: {
            style: google.maps.ZoomControlStyle.SMALL
        },
        mapTypeControl: false,
        scaleControl: false,
        streetViewControl: false,
        overviewMapControl: false,
        center: new google.maps.LatLng(-34.397, 150.644),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById('map'), myOptions);

    if (navigator.geolocation) {

        navigator.geolocation.getCurrentPosition(function(position) {
            // get current position
            var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

            // Center the map on the position passed from Geolocation
            map.setCenter(pos);

            var domImg1 = new Image(),
                domImg2 = new Image(),
                domImg3 = new Image();

            var images = [domImg1, domImg2, domImg3],
                j = 0;

            for (i in images) {
                images[i].onload = function() {
                    if (++j == 3) {
            ...