JSFiddle - React, Tailwind, and code Playground

by chrislkeller

HTML

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script type="text/javascript"src="http://maps.google.com/maps/api/js?sensor=false"></script>

<div id="map_canvas"></div>

<div id="ft_data"></div>

CSS

#map_canvas { width: 900px;height: 700px; }

JavaScript

var map;
var latlng = new google.maps.LatLng(43.034979,-89.502284);

//begin main function
$(document).ready(function() {

    var options = {
        zoom: 20,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.SATELLITE,
        scrollwheel: false,
        draggable: true,
        mapTypeControl: false,
        navigationControl: true,
        streetViewControl: false,
        panControl: false,
        scaleControl: true,
        navigationControlOptions: {
            style: google.maps.NavigationControlStyle.LARGE,
            position: google.maps.ControlPosition.RIGHT_TOP
        }
    };

    //write the map
    var map = new google.maps.Map(document.getElementById('map_canvas'), options);

    //write polylines
    var holeOneCoordinates = [
        new google.maps.LatLng(43.034942,-89.502696),
        new google.maps.LatLng(43.035002,-89.502288),
        new google.maps.LatLng(43.035033,-89.501811),
        new google.maps.LatLng(43.035034,-89.501778),
        new google.maps.LatLng(43.03502,-89.501758),        
    ];

    //style polylines
    var holeOne = new google.maps.Polyline({
        path: holeOneCoordinates,
        strokeColor: "#FF0000",
        strokeOpacity: 1.0,
        strokeWeight: 2
    });

    //set the polylines
    holeOne.setMap(map);
    

    //marker array
    var hotels = [
        ['No. 1 Tee', 43.034942,-89.502696, 5],
        ['No. 1 Mid', 43.035002,-89.502288, 4],
        ['No. 1 Front', 43.035033,-89.501811, 3],
        ['No. 1 Hole', 43.035034,-89.501778, 2],
        ['No. 1 Back', 43.03502,-89.501758, 1]
    ];
    

    //loop through marker array
    for (var i = 0; i < hotels.length; i++) {
        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(hotels[i][1], hotels[i][2]),
            map: map,
          //  icon: image,
            title: hotels[i][0],
            zIndex: hotels[i][3]
        });
    }

});
//end main function