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 infoWindow = new google.maps.InfoWindow();
    var geocoder = new google.maps.Geocoder();
    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(",");
            
            var latlng = new google.maps.LatLng(location[0], location[1]);
            
            pontos[i] = latlng;
            
            var marker = new google.maps.Marker({
                position: latlng,
                map: map
            });
            
            google.maps.event.addListener(marker, 'click', function() {
                infoWindow.setContent("Carregando...");
                infoWindow.open(map, this);
                
                google.maps.event.addListener(infoWindow, 'domready', function() {
                    geocoder.geocode({'latLng': infoWindow.position}, function(results, status) {
                        if (status == google.maps.GeocoderStatus.OK) {
                            infoWindow.setContent(results[0].formatted_address);
                        }
                    });
                });
            });
        }
        
        var flightPath = new google.maps.Polyline({
            path: pontos,
            strokeColor: '#FF0000',
            strokeOpacity: 1.0,
            strokeWeight: 3,
            map: map
        });
        
        flightPath.setMap(map);
    }
}

initialize();