Интеграция Google Maps на сайт

Я хочу создать веб-приложение, которое получит 2 местоположения и их почтовый индекс и покажет результат на карте Google. Например, я выбираю 2 города или страну и показываю карту дорог цветной линией по своим точкам.


google-maps
person Mani    schedule 04.03.2011    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Лучшее место для поиска — документация Google Maps 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, получает результаты, а затем отображает их. Проще простого!

person m4rc    schedule 04.03.2011
comment
Я очень благодарен вам за ваш ответ. если вы пришлете мне код, я включу свой код и внесу изменения в соответствии с моими требованиями. я вижу вашу последнюю ссылку, она полностью связана с моим вопросом, но я добавляю больше местоположений и прикрепляю ее к моему заявлению. с уважением - person Mani; 04.03.2011
comment
еще одна вещь, размер карты настолько велик, что нам нужен 3 на 3 дюйма - person Mani; 04.03.2011
comment
Что касается размера карты, вы можете просто поместить его в div, у которого есть ширина и высота стиля. например. ‹div id=map_canvas style=width:100px;height:100px›‹/div› - person m4rc; 04.03.2011

arrow_upward
2
arrow_downward

Сохраните этот код как 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;
}
}
person Dhiral Pandya    schedule 05.10.2011