JSFiddle - React, Tailwind, and code Playground

by Lawrence Ross

HTML

<script src="https://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=geometry,places&amp;ext=.js"></script>
<div style="" id="mapa"></div>

CSS

html, body, #mapa {
    height: 500px;
    width: 500px;
    margin: 0px;
    padding: 0px
}

JavaScript

function initialize() {
    var latlng = new google.maps.LatLng(45, -85);
    var coord = ["45,-85", "45.001,-85.01"];
    var veic = ["some information", "other information"];

    var options = {
        zoom: 12,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var infoWindow = new google.maps.InfoWindow();
    var geocoder = new google.maps.Geocoder();
    map = new google.maps.Map(document.getElementById("mapa"), options);

    var pontos = [];
    if (coord.length > 1) {
        for (var i = 0; i < coord.length; i++) {
            var location = coord[i].split(",");

            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(location[0], location[1]),
                map: map
            });

            google.maps.event.addListener(marker, 'click', (function (marker, i) {
                return function () {
                    var dados = veic[i]; // // Veic [] is an array that at each position, I have some information.

                    infoWindow.setContent("<b>Dados: </b>Carregando...");
                    infoWindow.open(map, this);
                    google.maps.event.addListenerOnce(infoWindow, 'domready', function () {
                        geocoder.geocode({
                            'latLng': infoWindow.position
                        }, function (results, status) {
                            if (status == google.maps.GeocoderStatus.OK) {

                                infoWindow.setContent("<b>Endereço: </b>" + results[0].formatted_address + "</br> Veículo: " + dados);
                            } // Here in this passage, I can not get information from this variable.

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