谷歌地圖整合到網站

我想製作一個網絡應用程序，將獲得2位置和他們的郵政編碼，並顯示在谷歌地圖上的結果。例如，我選擇了2個城市或國家，根據我的要點用彩色線條顯示路線圖。谷歌地圖整合到網站

來源

2011-03-04 Mani

最好的地方，看起來是谷歌地圖API V3文檔 - 我建議V3，因爲它們不支持V2了

主要文件：http://code.google.com/apis/maps/documentation/javascript/

樣品：http://code.google.com/apis/maps/documentation/javascript/examples/index.html

簡單方向示例： http://code.google.com/apis/maps/documentation/javascript/examples/directions-simple.html

基本上你需要有兩個座標，雖然你可以使用街道地址，並將其傳遞給API，它會轉到Google Ge結果，然後繪製它。易如反掌！

來源

2011-03-04 08:48:31 m4rc

我非常感謝全額您的回答。如果您向我發送一段代碼，我會按照我的要求在代碼中完成修改並完成修改。我看到你的最後一個鏈接與我的問題完全相關，但我添加了更多位置，並附上了我的應用程序。最好的問候 – Mani 2011-03-04 09:19:03

有一件事地圖尺寸是如此之大，我們需要一個3×3英寸 – Mani 2011-03-04 09:22:43

關於地圖大小，你可以把它放在一個具有風格寬度和高度設置的div中。例如。

– m4rc 2011-03-04 10:02:20

這段代碼保存爲location.html

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Google Maps JavaScript API v3 Example: Map Geolocation</title> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
    <meta charset="UTF-8"> 
    <link href="map.css" rel="stylesheet" type="text/css"> 
<!-- 
Include the maps javascript with sensor=true because this code is using a 
sensor (a GPS locator) to determine the user's location. 
See: http://code.google.com/apis/maps/documentation/javascript/basics.html#SpecifyingSensor 
--> 
<script type="text/javascript" 
    src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 

<script type="text/javascript"> 
var siberia = new google.maps.LatLng(37.625364,-122.423905); 

function initialize() { 
    var myOptions = { 
    zoom:19, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
    var infowindow = new google.maps.InfoWindow({ 
      map: map, 
      position: siberia, 
      content: 'Location found using HTML5.' 
     }); 

    var marker = new google.maps.Marker({ 
    position: siberia, 
    map: map, 
    title: "omt" 
    }); 
    map.setCenter(siberia); 

} 
    google.maps.event.addDomListener(window, 'load', initialize); 
    </script> 
    </head> 
    <body> 
    <div id="map_canvas"></div> 
    </body> 
</html>

這段代碼保存爲map.css

html, body { 
    height: 100%; 
    margin: 0; 
    padding: 0; 
} 

#map_canvas { 
    height: 100%; 
} 

@media print { 
    html, body { 
    height: auto; 
    } 

#map_canvas { 
height: 650px; 
} 
}

來源

2011-10-05 12:41:47

谷歌地圖整合到網站

回答

相關問題