2016-10-15 2 views
0

내 웹 사이트 : http://www.ilovefooddreams.com/eligibility 나는 Google지도를 보여 주며 갑자기 지금 알려줍니다.죄송합니다. 뭔가 잘못되었습니다. Google지도에서 api

"죄송합니다.이 페이지는 Google지도 을 올바르게로드하지 못했습니다. 자세한 내용은 JavaScript 콘솔을 참조하십시오."

내가 찾을 수있는 모든 곳을 보았고 API 키를 얻으려고했다. 내가 엮은 사람이 있지만 여전히 효과가 없습니다. 여기

<html> 
<head> 
    </head> 
    <body> 
<div id="googleMap" style="width:1030px;height:380px;"></div> 


</body> 
<script 
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDV9O4nd02xCwyy-AeAmFJ_dR3SKh5GKAE&libraries=places&callback=initialize" 

    async defer> 
</script> 

<script> 

var amsterdam=new google.maps.LatLng(34.0789742,-118.361875); 
function initialize() 
{ 
var mapProp = { 
    center:amsterdam, 
    zoom:13, 
    mapTypeId:google.maps.MapTypeId.ROADMAP 
    }; 

var map = new google.maps.Map(document.getElementById("googleMap"),mapProp); 

var myCity = new google.maps.Circle({ 
    center:amsterdam, 
    radius:3000, 
    strokeColor:"#0000FF", 
    strokeOpacity:0.8, 
    strokeWeight:2, 
    fillColor:"#0000FF", 
    fillOpacity:0.4 
    }); 

myCity.setMap(map); 
} 

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

</script> 



</html> 

나는이 문제를 어떻게 해결합니까 코드를 무엇입니까?

감사합니다.

답변

0

initMap이라는 함수를 참조하는 스크립트에 콜백이 있습니다. 당신은 콜백이 처리로 리스너를 제거해야합니다 initialize

<div id="googleMap" style="width:1030px;height:380px;"></div> 
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDV9O4nd02xCwyy-AeAmFJ_dR3SKh5GKAE&callback=initialize" async defer></script> 
<script> 
function initialize() 
{ 
var amsterdam=new google.maps.LatLng(34.0789742,-118.361875); 
var mapProp = { 
    center:amsterdam, 
    zoom:13, 
    mapTypeId:google.maps.MapTypeId.ROADMAP 
    }; 

var map = new google.maps.Map(document.getElementById("googleMap"),mapProp); 

var myCity = new google.maps.Circle({ 
    center:amsterdam, 
    radius:3000, 
    strokeColor:"#0000FF", 
    strokeOpacity:0.8, 
    strokeWeight:2, 
    fillColor:"#0000FF", 
    fillOpacity:0.4 
    }); 

myCity.setMap(map); 
} 

</script> 

JSFiddle

으로 업데이트해야합니다.

+0

난 그냥 시도하고 https://maps.googleapis.com/maps/api/js?key=AIzaSyDV9O4nd02xCwyy-AeAmFJ_dR3SKh5GKAE&libraries=places&callback=initialize에 대한 링크를 변경하지만 여전히 작동하지 않습니다. 다른 해결책이 있습니까? – Elixir

+0

본문 뒤에 스크립트가로드되어 있는지 확인하십시오. 머리가 아니야. 내가 일하는 JSFiddle을 추가했습니다. –

+0

방금 ​​업데이트했고 여전히 작동하지 않습니다. 내 질문에 코드를 업데이 트했습니다. 문제를 아십니까? – Elixir

1

현재 웹 사이트에있는 버전은 API에 포함 된 페이지의 키가 없으므로 (귀하의 질문에 게시 한 것과 동일하지 않음) 자바 스크립트 콘솔에 Google Maps API error: MissingKeyMapError https://developers.google.com/maps/documentation/javascript/error-messages#missing-key-map-error을보고하고 있습니다.

<script 
src="https://maps.googleapis.com/maps/api/js"> 
</script> 
관련 문제