JSFiddle - React, Tailwind, and code Playground
by shaneburgess
HTML
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<div id="map-canvas"></div>
CSS
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
.infoWindow{
padding: 10px;
}
}
JavaScript
var map;
var location = new Object();
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
location.lat = position.coords.latitude;
location.lng = position.coords.longitude;
//alert(location.lat);
initialize();
});
}else{
location.lat = 0;
location.lng = 0;
initialize();
}
var data = [{
"lat": 42.9620365770387,
"long": -83.2354285043009,
"name": "FlintRiverSouth"
}, {
"lat": 43.0923742619157,
"long": -83.3377135450598,
"name": "PlumCreek"
}, {
"lat": 42.980604315804,
"long": -83.4426473620867,
"name": "HaslerCreek"
}, {
"lat": 43.2279039629563,
"long": -83.2133597886452,
"name": "FlintRiverNorth"
}, {
"lat": 43.251110883185,
"long": -83.8542294873041,
"name": "PineRun"
}, {
"lat": 43.2344408801679,
"long": -83.9921434814507,
"name": "Misteguary"
}, {
"lat": 43.1228965596599,
"long": -83.86706860185,
"name": "FlintRiverFlushing"
}, {
"lat": 43.0012380711694,
"long": -83.7028257936685,
"name": "SwartzCreek"
}, {
"lat": 43.0166005070051,
"long": -83.6743359478363,
"name": "Gilkey"
}, {
"lat": 42.9986754069756,
"long": -83.6547385086734,
"name": "ThreadCreekl"
}, {
"lat": 43.0385167575929,
"long": -83.6061470976043,
"name": "KearsleyCreek"
}, {
"lat": 43.1163788400943,
"long": -83.5985408514985,
"name": "ButternutCreek"
}, {
"lat": 43.0183649939453,
"long": -83.3495933527953,
"name": "FarmersCreek."
}, {
"lat": 43.2656101981944,
"long": -83.3006646011531,
"name": "SquawCreek"
}, {
"lat": 43.1875514775867,
"long": -83.8625746348917,
"name": "BrentRun"
}, {
"lat": 43.1114983219852,
"long": -83.5157550612346,
"name": "FlintRiverRichfield"
}, {
"lat": 43.2781888521686,
"long": -83.8880705977982,
"name": "SilverCreek"
}, {
"lat": 43.2512566358244,
"long":...