2015-03-18 194 views
-1

我在實施我的網頁上的Google地圖時遇到了一些困難。代碼工作和我的地圖這顯示完美顯示由於我宣佈的長和緯度的首選位置。問題是我的標記根本不會顯示。我嘗試了很多次,但似乎無法解決問題。任何援助將不勝感激。 'xxxx'表示google給我的api關鍵字。Google地圖標記不顯示(Google Maps API v3)

<!DOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 
    html, body, #map-canvas { height: 100%; margin: 0; padding: 0;} 
</style> 
<script type="text/javascript" 
    src="https://maps.googleapis.com/maps/api/js?key=xxxxxxx"> 
</script> 
<script type="text/javascript"> 
function initialize() { 
    var mapOptions = { 
     center: { lat: 52.251607, lng: -0.890744}, 
     zoom: 16 

    }; 
    var map = new google.maps.Map(document.getElementById('map-canvas'), 
     mapOptions); 

     var marker = new google.maps.Marker({ 
     position: mapOptions, 
     map: map, 
     title: "The Therapy of Business" 
    }); 
} 

google.maps.event.addDomListener(window, 'load', initialize); 
</script> 
</head> 
<body background="tree.jpg"> 
    <h2>Contact Us<h2> 
<center><div id="map-canvas" style="width:500px; height:250px;postion:relative;top:200px"></div></center> 

</body> 
</html> 

回答

0

我看到在JavaScript控制檯消息:Uncaught InvalidValueError: setPosition: not a LatLng or LatLngLiteral: in property lat: not a number

jsfiddle containing your code

mapOptions不一個有效的google.maps.LatLng或LatLngLiteral(但是mapOptions.center是)。

corrected jsfiddle

工作代碼片段:

function initialize() { 
 
    var mapOptions = { 
 
    center: { 
 
     lat: 52.251607, 
 
     lng: -0.890744 
 
    }, 
 
    zoom: 16 
 

 
    }; 
 
    var map = new google.maps.Map(document.getElementById('map-canvas'), 
 
    mapOptions); 
 

 
    var marker = new google.maps.Marker({ 
 
    position: mapOptions.center, 
 
    map: map, 
 
    title: "The Therapy of Business" 
 
    }); 
 
} 
 

 
google.maps.event.addDomListener(window, 'load', initialize);
html, 
 
body, 
 
#map-canvas { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
}
<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<h2>Contact Us<h2> 
 
<center><div id="map-canvas" style="width:500px; height:250px;postion:relative;top:200px"></div></center>

0

按照reference ,這是你的代碼更正:

<!DOCTYPE html> 
<html> 
    <head> 
     <style type="text/css"> 
    html, body, #map-canvas { height: 100%; margin: 0; padding: 0;} 
     </style> 
<script type="text/javascript" 
    src="https://maps.googleapis.com/maps/api/js?key=XXXXXXXXXX&sensor=false"> 
</script> 
<script type="text/javascript"> 
    function initialize() { 
    var myLatlng = new google.maps.LatLng(52.251607,-0.890744); 
    var mapOptions = { 
     zoom: 16, 
     center: myLatlng 
    } 
    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 

     var marker = new google.maps.Marker({ 
     position: myLatlng, 
     map: map, 
     title: 'The Therapy of Business' 
    }); 
} 

google.maps.event.addDomListener(window, 'load', initialize); 
</script> 
    </head> 
    <body background="tree.jpg"> 
     <h2>Contact Us<h2> 
       <center><div id="map-canvas" style="width:500px; height:250px;postion:relative;top:200px"></div></center> 
    </body> 
</html>