И снова карты гугл (Google Maps)

Практический пример использования Google Maps в среде управления сайтом Cotonti

Как вставить карты Google на страницу сайта

Картам Google мы посвятили уже две статьи. В третьей мы подведем итоги и расскажем о том, каким образом изложенные выше материалы можно реализовать на практике.

Задача: создать плагин для сайта, который бы отображал бы карту Google на странице, если заданы координаты.

1. Создаем дополнительные поля для страниц:

  • latlng (тип: input, описание: Координаты)
  • zoom (тип: select, значения: 10,13,2,4,6,7,8,9,10,11,12,13, описание: Масштаб)

2. Добавляем теги в page.add.tpl:

<tr>
	<td>{PAGEADD_FORM_LATLNG_TITLE}:</td>
	<td>{PAGEADD_FORM_LATLNG}</td>
</tr>
<tr>
	<td>{PAGEADD_FORM_ZOOM_TITLE}:</td>
	<td>{PAGEADD_FORM_ZOOM}</td>
</tr>

и page.edit.tpl:

<tr>
	<td>{PAGEEDIT_FORM_LATLNG_TITLE}:</td>
	<td>{PAGEEDIT_FORM_LATLNG}</td>
</tr>
<tr>
	<td>{PAGEEDIT_FORM_ZOOM_TITLE}:</td>
	<td>{PAGEEDIT_FORM_ZOOM}</td>
</tr>

3. В файл шаблона header.tpl перед {HEADER_COMPOPUP} вписываем:

<script src="http://maps.google.com/maps?file=api&v=2&hl=ru&key={PHP.cfg.freetext1}" 
type="text/javascript"></script>

4. Регистрируем сайт по адресу http://code.google.com/intl/ru/apis/maps/signup.html и получаем ключ.

5. Заходим в Админпанель -> Слоты меню и в графе Меню #1 вписываем ключ.

6. Теперь правим темплейт страницы:

<!-- IF {PAGE_LATLNG} -->
<script type="text/javascript">
	$(document).ready(function(){
	var map = new GMap2(document.getElementById('map_canvas'));
	var burnsvilleMN = new GLatLng({PAGE_LATLNG});
	map.setCenter(burnsvilleMN, {PAGE_ZOOM});
	map.enableGoogleBar(); /*Включить строку поиска на карте*/
	map.addControl(new GLargeMapControl3D()); /* Добавить навигатор и линейку масштаба*/
	map.addControl(new GMenuMapTypeControl()); /*Тип карты: карта, гибрид, спутник */
	map.clearOverlays();
	point = new GLatLng({PAGE_LATLNG});map.addOverlay (new GMarker(point)); /*Создает метку в центре карты*/
	});
</script>
<div id="map_canvas" style="width:590px; height:300px;"> </div>
<!-- ENDIF -->

(ширина и высота блока приведена для примера)

Готово: карта Google будет выведена на нашей странице только если указаны координаты!

Заинтересовались? Звоните нам по телефонам +375 (29) 774-35-89 и +375 (44) 774-35-89 в Минске. Мы будем рады помочь Вам в реализации Вашего проекта.

3 комментария к посту «И снова карты гугл (Google Maps)»
  • Аватар

    3. anodaz dona @ 7 янв 2010 г. в 23:15

    Оновил описание, добавил все что надо пользователям. Сергеич: http://code.google.com/intl/ru/apis/maps/documentation/reference.html Больше, чем тут вряд ли тебе поскажем) Остальное это реально знание явы и не более того) Люди даже рисуют на картах и прекрасно себя чувствуют

  • Аватар

    2. Admin @ 7 янв 2010 г. в 20:02

    Они, в принципе, уже освоены, но еще не вошли в tutorial

  • Аватар

    1. Sergeich @ 7 янв 2010 г. в 19:28

    ну и остался последний рывок освоения гоглокарт - создание юзерских меток на картах :)

Новый комментарий

Для редактирования комментария осталось 10 минут