JSFiddle - React, Tailwind, and code Playground

by James

HTML

<div id="map"></div>
<script src="//maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>
<!-- if it helps, my geolocation coords are (41.081445, -81.519005) -->

CSS

html, body, #map {
    height: 100%;
    width: 100%;
    margin: 0 auto;
}

JavaScript

var map;
//create the map
function initialize() {
    var mapOptions = {
        zoom: 10,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById('map'), mapOptions);



    // Try HTML5 geolocation
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function (position) {
            var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
            var geolocMarker = new google.maps.Marker({
                map: map,
                position: pos,
                clickable: true,
                icon: 'http://labs.google.com/ridefinder/images/mm_20_green.png'
            });
            geolocMarker.info = new google.maps.InfoWindow({
                content: '<b>Your location</b> '
            });
            google.maps.event.addListener(geolocMarker, 'click', function () {
                geolocMarker.info.open(map, geolocMarker);
            });
            map.setCenter(pos);
        }, function () {
            handleNoGeolocation(true);
        });
    } else {
        // Browser doesn't support Geolocation
        handleNoGeolocation(false);
    }



    //Fusion Table query, limits results to 3 based on location
    var base_query = {
        select: 'Location',
        from: '1MsmdOvWLKNNrtKnmoEf2djCc3Rp_gYmueN4FGnc',
        limit: 3
    };
    var ftLayer = new google.maps.FusionTablesLayer({
        map: map,
        query: $.extend({}, base_query)
    });
    var infowindow = new google.maps.InfoWindow();
    var marker, i;
    for (i = 0; i < base_query.length; i++) {
        marker = new google.maps.Marker({
            position: new google.maps.LatLng(base_query[i][1], base_query[i][2]),
            map: map
        });
        google.maps.event.addListener(marker, 'click', (function (marker, i) {
            return function () {
                infowindow.setContent(base_query[i][0]);
                infowindow.open(map, marker);
...