Google지도 API V3 마커가로드되지 않음

Question

내가하고있는 웹 사이트의 Google지도에 표시 할 마커를 얻으려고합니다. 지도가 더 이상로드되지 않는 마커 코드를 추가하면 마커 코드가 없으면지도가 잘로드되고 올바른 위치 (마커가 없음)가 표시됩니다. 분명히 나는 ​​간단한 것을 놓치고 있지만 Jquery에 익숙하지 않다.

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<style type="text/css"> 
    html { height: 100% } 
    body { height: 100%; margin: 0; padding: 0 } 
    #map-canvas { height: 100% } 
</style> 
<script type="text/javascript" 
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBWJYTBt3bKUIsQKKsQPSnR1IHNdkAmBQs&sensor=false"> 
</script> 
<script type="text/javascript"> 
    function initialize() { 
    var mapOptions = { 
     center: new google.maps.LatLng(53.154662, -1.208357), 
     zoom: 15, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    var map = new google.maps.Map(document.getElementById("map-canvas"), 
     mapOptions); 
    } 
var marker = new google.maps.Marker({ 
    position:(53.154662, -1.208357), 
    map: map-canvas, 
    title:"Hello World!" 
}); 
    google.maps.event.addDomListener(window, 'load', initialize); 

</script> 

감사합니다.

Answer 1

map -property는이 될 수있는 google.maps.Map -instance 및 위치 재산권되어야 예상되는 google.maps.LatLng :

또한 당신은지도가 이미 생성 된 마커를 만들고 범위에 있어야합니다 어디에 maps-instance에 액세스 할 수 있습니다 (예 : initialize() 끝에.

function initialize() { 
    var mapOptions = { 
     center: new google.maps.LatLng(53.154662, -1.208357), 
     zoom: 15, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    var map = new google.maps.Map(document.getElementById("map-canvas"), 
     mapOptions); 

    var marker = new google.maps.Marker({ 
     position:new google.maps.LatLng(53.154662, -1.208357), 
     map: map, 
     title:"Hello World!" 
    }); 
    }