如何在Web应用程序中集成G​​oogle Maps?

时间:2010-07-17 08:27:23

标签: web-applications google-maps integration

我有一个网络应用程序。我想整合Google地图,以显示用户在搜索位置输入的位置的地图。有什么帮助吗?

3 个答案:

答案 0 :(得分:4)

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

<!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>

截图:

Google Maps v3 Geocoding Demo

您只需将address变量的值(在此示例中设置为'London, UK')替换为用户搜索的位置。

答案 1 :(得分:0)

步骤1:打开要嵌入的地图。它可以是您在我的地图标签下创建的地图,也可以是搜索地址,本地商家或行车路线。

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

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

或者看看这个网站 http://www.higheredblogcon.com/library/deweese/presentation.html

答案 2 :(得分:0)

你需要的是

地理编码(将地址转换为long,lat的方法) http://code.google.com/apis/ajax/playground/#geocoding_simple

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