如何将 Google 地图集成到 Web 应用程序中？答案

【问题标题】：How to integrate Google Maps in a web application?如何将 Google 地图集成到 Web 应用程序中？
【发布时间】：2010-07-17 08:27:22
【问题描述】：

我有一个网络应用程序。我想集成谷歌地图以显示用户在搜索位置中键入的位置的地图。有什么帮助吗？

【问题讨论】：

显示您公司的位置？？
不完全是。该位置是用户愿意通过地图看到的位置。我不想透露更多细节，因为它是机密的。

标签： web-applications google-maps integration

【解决方案1】：

如果我正确理解了您的问题，您希望您的用户搜索一个位置，然后将其显示在地图上。如果是这种情况，可以使用Google Maps JavaScript API 提供的Geocoding Services 轻松完成。考虑以下示例：

<!DOCTYPE html>
<html> 
<head> 
   <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
   <title>Google Maps Geocoding Demo</title> 
   <script src="http://maps.google.com/maps/api/js?sensor=false" 
           type="text/javascript"></script> 
</head> 
<body> 
   <div id="map" style="width: 400px; height: 300px;"></div> 

   <script type="text/javascript"> 

   var address = 'London, UK';

   var map = new google.maps.Map(document.getElementById('map'), { 
       mapTypeId: google.maps.MapTypeId.TERRAIN,
       zoom: 6
   });

   var geocoder = new google.maps.Geocoder();

   geocoder.geocode({
      'address': address
   }, 
   function(results, status) {
      if(status == google.maps.GeocoderStatus.OK) {
         new google.maps.Marker({
            position: results[0].geometry.location,
            map: map
         });
         map.setCenter(results[0].geometry.location);
      }
      else {
         // Google couldn't geocode this request. Handle appropriately.
      }
   });

   </script> 
</body> 
</html>

截图：

您可以简单地将address 变量的值（在本例中设置为'London, UK'）替换为用户搜索的位置。

【讨论】：

【解决方案2】：

第 1 步：打开要嵌入的地图。它可以是您在我的地图选项卡下创建的地图，也可以是地址、本地商户或行车路线的搜索。

第 2 步：单击“链接到此页面”后，从文本框中复制 HTML 代码。您还可以自定义地图的大小并在嵌入之前进行预览。

第 3 步：将 HTML 代码粘贴到您的网站或博客编辑器中。

否则请参阅此网站 http://www.higheredblogcon.com/library/deweese/presentation.html

【讨论】：

【解决方案3】：

你需要的是

地理编码（一种将地址转换为长、纬度的方法） http://code.google.com/apis/ajax/playground/#geocoding_simple

还有一张简单的地图 http://code.google.com/apis/ajax/playground/#map_simple

【讨论】：