無法在谷歌地圖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>

**