JSFiddle - React, Tailwind, and code Playground

by bartek

HTML

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

<!-- CHECK ELEMENT ID also UPDATE CSS -->
<div id="map_canvas"></div>

CSS

html, body, #map_canvas { margin: 0; padding: 0; height: 100% }

JavaScript

var map;
var mapOptions = {
    center: new google.maps.LatLng(10.0, 20.0),
    zoom: 2,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};

function initialize() {
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);


    var lineCoordinates = [
        new google.maps.LatLng(0, 0),
        new google.maps.LatLng(20, 0),
        new google.maps.LatLng(30, 20),
        new google.maps.LatLng(20, 40),
        new google.maps.LatLng(0, 40),
        new google.maps.LatLng(0, 0)
        ];


    var lineSymbol = {
        path: 'M 0,-0.5 0,0.5',
        strokeWeight: 2,
        strokeOpacity: 1,
        scale: 3
    };

    var line = new google.maps.Polyline({
        path: lineCoordinates,
        strokeColor: "blue",
        strokeOpacity: 0,
        icons: [{
            icon: lineSymbol,
            offset: '100%',
            repeat: '10px'}],
        map: map
    });
}


google.maps.event.addDomListener(window, 'load', initialize);