Information Box Google Maps with JS

Question

Information Box Google Maps with JS

Navigation

#1 by (9 votes)

7

How do I display an information box when clicking on the marker? I tried to do following the documentation, but when I click, the box appears but not the information inside it.

 //Center
    var mapProp = {
        center: new google.maps.LatLng(-14.235004, -51.92528),
        zoom: 5,
        disableDefaultUI: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    //Map 
    var map = new google.maps.Map(document.getElementById("googleMapsOne"), mapProp);

    var contentString = '<div id="content">Informação</div>';

    var infowindow = new google.maps.InfoWindow({
      content: contentString,
      maxWidth: 200
    });

    // Circle 
    var mycityCircle = new google.maps.Circle({
        center: new google.maps.LatLng(7.2964, 80.6350),
        radius: l,
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillOpacity: 0.2
    });
    mycityCircle.setMap(map);
    // Marker
    locations.map(function(val){
        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(val[1], val[2]),
            icon: 'images/pin.png',
            map: map,
            animation: google.maps.Animation.BOUNCE
        });
        //marker.setMap(map)
        marker.addListener('click', function() {
          infowindow.open(map, marker);
        });
    });

I need to add to each Marker, a different text (that comes from my API), I tried to put it inside the Map, but that does not work

javascript maps

asked by anonymous 22.06.2017 / 14:59

1 answer

What does it mean to run lint in code? What is the given name for the number of columns in a table?

score 9 · Accepted Answer

Fortunately I managed to resolve, for those who had the same problem as me, follow the updated code.

function initialize(locations, string){

        //Center
        var mapProp = {
            center: new google.maps.LatLng(-14.235004, -51.92528),
            zoom: 5,
            disableDefaultUI: true,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        //Map 
        var map = new google.maps.Map(document.getElementById("googleMapsOne"), mapProp);

        var contentString = '<div id="content">Rafael</div>';

        var infowindow = new google.maps.InfoWindow();

        locations.map(function(val){
            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(val[1], val[2]),
                icon: 'images/truck.png',
                map: map,
                animation: google.maps.Animation.BOUNCE
            });
            //marker.setMap(map)
            google.maps.event.addListener(marker, 'click', function() {
                infowindow.setContent(val[0])
              infowindow.open(map, marker);
            });
        });

    }