谷歌地图整合到网站

我想制作一个网络应用程序，将获得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

谷歌地图整合到网站

回答

相关问题