[英]Can't get Google API map to appear in Javascript
I am trying to create a Google map in which I have multiple map markers. 我正在尝试创建一个有多个地图标记的Google地图。 The map should then be centered based on where those markers end up. 然后应根据这些标记的最终位置将地图居中。 I've hard-coded some coordinates for testing purposes. 我已经为测试目的对一些坐标进行了硬编码。 I've already set a height and width for my map-canvas div, also. 我也已经为地图画布div设置了高度和宽度。 I cannot get the map to appear on the page. 我无法使地图显示在页面上。 I've looked everywhere and seen many examples, and mine look a lot like the examples. 我到处都看过,看到了很多示例,而我的看起来很像示例。 And yes, I do include my API key in my actual code. 是的,我确实在我的实际代码中包含了API密钥。
<!DOCTYPE html>
<html>
<head>
<title>Check In Draft</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<link type="text/css" href="styles.css" rel=stylesheet />
<h1>Where am I?</h1>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=xxxxx&sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var mapMarker, i;
var locations = [
[ 'Location 1', 42.5822, -87.8456, 3 ],
[ 'Location 2', 42.5812, -87.8446, 2 ],
[ 'Location 3', 42.5832, -87.8466, 1 ]
];
var mapOptions = {
mapTypeId: google.maps.MapTypeId.ROADMAP,
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var infowindow = new.google.maps.InfoWindow();
var bounds = new google.maps.LatLngBounds();
for(i = 0; i < locations.length; i++) {
//Edit map marker
mapMarker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
animation: google.maps.Animation.DROP
});
bounds.extend(mapMarker.position);
google.maps.event.addListener(marker, 'click', (function(mapMarker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, mapMarker);
}
})(mapMarker, i));
}
//now fit the map to the newly inclusive bounds
map.fitBounds(bounds);
//(optional) restore the zoom level after the map is done scaling
var listener = google.maps.event.addListener(map, "idle", function () {
map.setZoom(10);
google.maps.event.removeListener(listener);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="login-links">
Login | Sign Up
</div>
</head>
<body>
<div id="map-canvas"/>
</body>
</html>
Here is my styles.css page also. 这也是我的styles.css页面。
html
{
height: 100%;
}
body
{
height: 100%;
margin: 0;
padding: 0;
background-color: #b0c4de;
}
h1
{
text-align: center;
}
#map-canvas
{
height: 75%;
width: 75%;
margin-left: auto;
margin-right: auto
}
#login-links
{
text-align: right;
}
Thanks in advance for any help! 在此先感谢您的帮助!
This is one problem: 这是一个问题:
var infowindow = new.google.maps.InfoWindow();
should be 应该
var infowindow = new google.maps.InfoWindow();
Another issue is: 另一个问题是:
google.maps.event.addListener(marker, 'click', (function(mapMarker, i) {
should be: 应该:
google.maps.event.addListener(mapMarker, 'click', (function(mapMarker, i) {
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.