如何将Google地图添加到网站?

时间:2014-02-23 21:16:12

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

以下是我目前用于将Google地图添加到我的网站的代码吗?

<!DOCTYPE html>
<html>
  <head>
    <style>
      #map_canvas {
        width: 500px;
        height: 400px;
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script>
      function initialize() {
        var map_canvas = document.getElementById('map_canvas');
        var map_options = {
          center: new google.maps.LatLng(44.5403, -78.5463),
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(map_canvas, map_options)
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="map_canvas"></div>
  </body>
</html>

我有两个简单的问题:

  1. 如何添加用于确保我的服务器IP未被阻止的API密钥?

  2. 这似乎是使用了逻辑和纬度。如何更改此设置以使用城市名称?例如,可以输入“Houston”而不是坐标?

1 个答案:

答案 0 :(得分:0)

要添加Google Map API密钥,请按以下instructions进行操作。下面是用于添加自己的密钥的代码行。如果地图没有显示,则需要进行其他故障排除(即可能会被阻止)

<script type="text/javascript" 
        src="https://maps.googleapis.com/maps/api/js?key=(*YOUR KEY*)"></script>

将休斯顿添加到地图中心的最简单方法是找到休斯顿的纬度和长度。您可以在页面加载时创建表单,询问用户他们的城市,然后对城市进行地理编码并将地图加载到输入位置。这将需要相当多的额外工作。