2015-03-18 188 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>