javascript - 使用 Google Maps API 显示标记

标签 javascript api google-maps google-maps-api-3

我正在尝试使用 Google Maps API 设置一个简单的页面来显示位置上的标记。但是我没有得到这个代码的标记,它基于谷歌的示例代码 here .我改变了来源

"https://maps.googleapis.com/maps/api/js?key=API_KEY&sensor=false"

"http://maps.google.com/maps/api/js?sensor=false"

因为被推荐了here 为了避免使用 API key 。 var 标记声明是从谷歌复制的 here .必须更改什么才能显示我的标记?


<!DOCTYPE html>
<html>
  <head>
    <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="http://maps.google.com/maps/api/js?sensor=false"></script>
    </script>
    <script type="text/javascript">
      function initialize() {

        var location = new google.maps.LatLng(59.272, 10.418);  

        var mapOptions = {
          center: location,
          zoom: 8
        };

        var marker = new google.maps.Marker({
            position: location,
            map: map,
            title: 'Hello World!'
        });

        var map = new google.maps.Map(document.getElementById("map-canvas"),
            mapOptions);
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="map-canvas"/>
  </body>
</html>

最佳答案

将设置 map 的行移动到设置标记的行之前,因为标记在其调用中使用 map :

function initialize() {
  var location = new google.maps.LatLng(59.272, 10.418);

  var mapOptions = {
    center: location,
    zoom: 8
  };

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

  var marker = new google.maps.Marker({
    position: location,
    map: map,
    title: 'Hello World!'
  });
}

关于javascript - 使用 Google Maps API 显示标记,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21306643/

相关文章:

javascript - Google Maps API v3 : How do I pause/delay in Javascript to slow it down? 中的 OVER_QUERY_LIMIT

javascript - CSS3,旋转后di​​v未正确对齐

javascript - 如何根据 JavaScript 中的条件返回字符串的不同变体?

java - 什么是标记 (HTML) 生成的好技术?

php - CakePHP API Blackhole - validatePost 禁用不起作用?

ios - 在 UIWebView 中嵌入谷歌地图而不请求位置权限并显示谷歌面板

javascript - 为什么 AWS Lambda Node.js 示例包含带有 "S:"和 "N:"等键的 javascript 对象?

asp.net - 为什么这段代码只有在我使用断点时才有效?

iphone - iOS : How to enable Audio directions on Google Maps

android - 新的 Google 地方信息自动填充功能在点击时崩溃