Как интегрировать Google Maps в веб-приложение? - PullRequest
Новая
       32

Как интегрировать Google Maps в веб-приложение?

4 голосов
/ 17 июля 2010

У меня есть веб-приложение. Я хочу интегрировать Карты Google, чтобы показать карту местоположения, где пользователь вводит данные в месте поиска. Любая помощь?

Ответы [ 3 ]

4 голосов
/ 18 июля 2010

Если я правильно понял ваш вопрос, вы хотите, чтобы ваши пользователи искали местоположение, а затем отображали его на карте. В этом случае это можно сделать очень легко, используя Службы геокодирования , предоставляемые 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', на местоположение, которое ищут ваши пользователи.

0 голосов
/ 17 июля 2010

что вам нужно, это

геокодирование (способ превратить адрес в long, lat) http://code.google.com/apis/ajax/playground/#geocoding_simple

и простая карта http://code.google.com/apis/ajax/playground/#map_simple

0 голосов
/ 17 июля 2010

ШАГ 1: Откройте карту, которую вы хотите встроить.Это может быть карта, созданная вами на вкладке «Мои карты», или поиск по адресу, местному бизнесу или проезду.

ШАГ 2. Скопируйте HTML-код из текстового поля после нажатия «Ссылка на эту страницу».Вы также можете настроить размер карты и просмотреть ее перед встраиванием.

ШАГ 3. Вставьте HTML-код на свой веб-сайт или в редактор блога.

http://www.higheredblogcon.com/library/deweese/presentation.html

...