Самый простой способ создать мэшап Google Map?

Учитывая список мест, таких как

    <td>El Cerrito, CA</td>
    <td>Corvallis, OR</td>
    <td>Morganton, NC</td>
    <td>New York, NY</td>
    <td>San Diego, CA</td>

Как проще всего создать карту Google с кнопками для каждого местоположения?

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
9
0
4 756
5
Перейти к ответу Данный вопрос помечен как решенный

Ответы 5

Я предполагаю, что потребуется больше информации, чтобы действительно дать вам ответ, но в Django Pluggables есть плагин django-googlemap, который может помочь.

Редактировать: У Адама есть гораздо лучший ответ. В случае сомнений посмотрите примеры API.

Проверьте Примеры API Карт Google Они делают это довольно просто, и их документация по API великолепна. Большинство примеров предназначены для выполнения всего кода на JavaScript на стороне клиента, но существуют также API-интерфейсы для других языков.

Попробуйте это: http://www.google.com/uds/solutions/wizards/mapsearch.html

Это мастер карт Google, который сгенерирует для вас код. Не самый лучший для вашего приложения; но хорошее место, чтобы "намочить ноги";)

Редактировать: (нашел ссылку), вот хорошее пошаговое руководство по API Карт Google.

Удачи!

/ мп

Ответ принят как подходящий

Я предполагаю, что у вас уже есть основы для Карт в вашем коде с вашим ключом API.

<head>
  <script 
   type = "text/javascript"
   href = "http://maps.google.com/maps?
         file=api&v=2&key=xxxxx">
  function createMap() {
    var map = new GMap2(document.getElementById("map"));
    map.setCenter(new GLatLng(37.44, -122.14), 14);
  }
  </script>
</head>
<body onload = "createMap()" onunload = "GUnload()">

Все в Google Maps основано на широте (широте) и долготе (lng) .
Итак, чтобы создать простой маркер, вам просто нужно создать GMarker с широтой и долготой.

var where = new GLatLng(37.925243,-122.307358); //Lat and Lng for El Cerrito, CA
var marker = new GMarker(where); // Create marker (Pinhead thingy)
map.setCenter(where); // Center map on marker
map.addOverlay(marker); // Add marker to map

Однако, если вы не хотите искать широту и долготу для каждого города, вы можете использовать Google Geo Coder. Вот пример:

var address = "El Cerrito, CA";
var geocoder = new GClientGeocoder;
geocoder.getLatLng(address, function(point) {
  if (point) {
    map.clearOverlays(); // Clear all markers
    map.addOverlay(new GMarker(point)); // Add marker to map
    map.setCenter(point, 10); // Center and zoom map on marker
  }
});

Поэтому я бы просто создал массив GLatLng каждого города с помощью GeoCoder, а затем нарисовал бы их на карте.

Вот несколько ссылок, но, как и в большинстве случаев, я еще не попробовал их.

http://gathadams.com/2007/08/21/add-google-maps-to-your-net-site-in-10-minutes/

http://www.mapbuilder.net/

Ваше здоровье Джон

Другие вопросы по теме