Fabiola Reyes Fabiola Reyes - 16 days ago 4
Javascript Question

Can't display InfoWindow on Google Maps V3 (map is not defined)

I'm experimenting with de API google maps, i tried to display an infowindow when I clicking the marker, but display in devtools this:

main.js:56 Uncaught ReferenceError: map is not defined(…)

I found that my addlistener should be in on the function geocodeaddress but it still no show :(
This is my code:

function initMap() {
// Create a map object and specify the DOM element for display.
var latlng = new google.maps.LatLng(21.1528213,-101.7136297);
var mapCanvas = document.getElementById("mapa");
var OpcionesMapa = {center: latlng, zoom: 12};
var map = new google.maps.Map(mapCanvas, OpcionesMapa);

// marcador.setMap(map);
var geocoder = new google.maps.Geocoder();

document.getElementById('submit').addEventListener('click', function(){
geocodeAddress(geocoder, map);
});



}

function geocodeAddress(geocoder, resultsMap) {
var pinColor = "01A9DB"; //Blue
var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor,
new google.maps.Size(21, 34),
new google.maps.Point(0,0),
new google.maps.Point(10, 34));

var address = document.getElementById('domicilio').value;
geocoder.geocode({'address': address}, function(results, status) {
if (status === google.maps.GeocoderStatus.OK) {
resultsMap.setCenter(results[0].geometry.location);
marker = new google.maps.Marker({
map: resultsMap,
position: results[0].geometry.location,
icon: pinImage

});
var infowindow = new google.maps.InfoWindow({
content: 'Hello'

});

google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});


} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}

Answer

You are getting the error Uncaught ReferenceError: map is not defined(…) inside the function geocodeAddress(geocoder, resultsMap) because inside that function, map is undefined. The name of the google.maps.Map object inside that routine is resultsMap.

  marker = new google.maps.Marker({
    map: resultsMap,
    position: results[0].geometry.location,
    // icon: pinImage

  });
  var infowindow = new google.maps.InfoWindow({
    content: 'Hello'
  });

  google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(resultsMap, marker);
  });

code snippet:

function initMap() {
  // Create a map object and specify the DOM element for display.
  var latlng = new google.maps.LatLng(21.1528213, -101.7136297);
  var mapCanvas = document.getElementById("mapa");
  var OpcionesMapa = {
    center: latlng,
    zoom: 12
  };
  var map = new google.maps.Map(mapCanvas, OpcionesMapa);

  var geocoder = new google.maps.Geocoder();

  document.getElementById('submit').addEventListener('click', function() {
    geocodeAddress(geocoder, map);
  });
}

function geocodeAddress(geocoder, resultsMap) {

  var address = document.getElementById('domicilio').value;
  geocoder.geocode({
    'address': address
  }, function(results, status) {
    if (status === google.maps.GeocoderStatus.OK) {
      resultsMap.setCenter(results[0].geometry.location);
      marker = new google.maps.Marker({
        map: resultsMap,
        position: results[0].geometry.location,
      });
      var infowindow = new google.maps.InfoWindow({
        content: 'Hello'
      });

      google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(resultsMap, marker);
      });

    } else {
      alert('Geocode was not successful for the following reason: ' + status);
    }
  });
}

google.maps.event.addDomListener(window, "load", initMap);
html,
body,
#mapa {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<input id="domicilio" value="Leon, Guanajuato" />
<input id="submit" type="button" value="submit" />
<div id="mapa"></div>

**