JSFiddle - React, Tailwind, and code Playground

by Paulo Rodrigues

HTML

<script src="//maps.googleapis.com/maps/api/js?sensor=false"></script>
<div id="mapa"></div>

CSS

body, html, #mapa {height: 100%}

JavaScript

function initialize() {
    var latlng = new google.maps.LatLng(-3.734084, -38.576155);
    
    var options = {
        zoom: 12,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    
    var map = new google.maps.Map(document.getElementById("mapa"), options);
    
    var coord = ["-03.734084,-038.576155", "-03.775084,-038.512155", "-03.793084,-038.546155"];
    
    if (coord.length > 1) {
        var pontos = [];
        
        for (var i = 0; i < coord.length; i++) {
            var location = coord[i].split(",");
            pontos[i] = new google.maps.LatLng(location[0], location[1]);
        }
        
        var flightPath = new google.maps.Polyline({
            path: pontos,
            strokeColor: '#FF0000',
            strokeOpacity: 1.0,
            strokeWeight: 3,
            map: map
        });
        
        flightPath.setMap(map);
    }
}

initialize();