无法在谷歌地图V3信息窗口显示（没有定义地图）

Question

我与德API谷歌地图的实验，我试图显示这个devtools当我点击该标记信息窗口，但显示：

main.js：56未捕获的ReferenceError：地图没有定义（...）

我发现我的addListener应在对功能geocodeaddress，但它仍然没有显示:( 这是我的代码：

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 1

您在函数geocodeAddress(geocoder, resultsMap)内部收到错误Uncaught ReferenceError: map is not defined(…)，因为在该函数中，map未定义。该例程中的google.maps.Map对象的名称是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); 
    }); 

代码片段：

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>

**