Can'；不要让Google API映射出现在Javascript中_Java_Javascript_Html_Google Maps Api 3

Can'；不要让Google API映射出现在Javascript中

java javascript html google-maps-api-3

Can'；不要让Google API映射出现在Javascript中,java,javascript,html,google-maps-api-3,Java,Javascript,Html,Google Maps Api 3,我正在尝试创建一个有多个地图标记的谷歌地图。然后，应根据这些标记的结束位置将地图居中。我已经为测试目的硬编码了一些坐标。我已经为地图画布div设置了高度和宽度。我无法使地图显示在页面上。我到处都看过，看到了很多例子，我的例子看起来很像。是的，我确实在我的实际代码中包含了我的API密钥 <!DOCTYPE html> <html> <head> <title>Check In Draft</title> <m

我正在尝试创建一个有多个地图标记的谷歌地图。然后，应根据这些标记的结束位置将地图居中。我已经为测试目的硬编码了一些坐标。我已经为地图画布div设置了高度和宽度。我无法使地图显示在页面上。我到处都看过，看到了很多例子，我的例子看起来很像。是的，我确实在我的实际代码中包含了我的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>

提前感谢您的帮助

这是一个问题：

var infowindow = new.google.maps.InfoWindow();

应该是

var infowindow = new google.maps.InfoWindow();

另一个问题是：

 google.maps.event.addListener(marker, 'click', (function(mapMarker, i) {

应该是：

 google.maps.event.addListener(mapMarker, 'click', (function(mapMarker, i) {

谢谢你的改进！不幸的是，这并没有解决我的问题。当我在浏览器中启动时，它仍然不会显示地图：（更新：问题似乎出现在Home.html的“var listener”部分。我删除了该变量，一切似乎都正常工作。当我粘贴回该变量时，它似乎没有改变任何东西。因此，我最终只是删除了它，一切似乎都正常工作。更新：问题似乎出现在“var listener”中Home.html的一部分。我删除了该变量，一切似乎都正常工作。当我将其粘贴回时，它似乎没有改变任何东西。因此，我最终只是删除了它，一切似乎都正常工作。

 google.maps.event.addListener(mapMarker, 'click', (function(mapMarker, i) {