Карта города на вашем сайте - используем google maps

+12
2.4K
Идея создания карты города на основе яндекс карт, либо google maps в мое голове таилась уже давно, но на реализацию идеи как-всегда не хватало времени. Но вот несколько дней назад появился свободный часик, кооторый и был потрачен на реализацию данной затеи, ведь приобретать InstantMaps ради реализации обыкновенной карты совсем не хочется...

Для начала я опробывал карту Жабинки от яндекса, но она меня очень разочаровала, ее детализация для нашего маленького городка оставляла желать лучшего, а вот просмотрев Google maps я обрадовался, карта от гугла пусть и не очень детальна, но во сто крат детальнее карты от Яндекса. За реализацию карты на основе google maps я и взялся.

Описываю порядокмойих действий:
1. Получаем ключ через http://code.google.com/intl/ru/apis/maps/signup.html не забыв указать адрес сайта внизу. Надеюсь дальнейшие действия описывать не нужно )). (ключ можно сохранить как отдельно, так и уже полное описание подключения через скрипт.)
2. Далее создаю на своем сайте новый раздел "Карта Жабинки через Админка | Контент | Разделы и статьи.
3. В описании раздела переходим к редактированию исходного кода, где прописываем скрипт подключения и вывода карты, в моем слоучае он выглядел следующим образом:
  1. <p>Предлагаем Вашему вниманию карту Жабинки и карту Жабинковского района созданную на основе извесного сервиса Google Maps.</p>
  2. <p> </p>
  3. <script src="http://maps.google.com/maps?file=api&v=2&sensor=true&key=ВАШ_КЛЮЧ" type="text/javascript"></script>
  4. <script type="text/javascript">
  5.  
  6. function initialize() {
  7. if (GBrowserIsCompatible()) {
  8. var map = new GMap2(document.getElementById("map_canvas"));
  9. map.setCenter(new GLatLng(52.1956, 24.0149), 15);
  10. map.setUIToDefault();
  11. var buh = new GMarker(new GLatLng(52.19531,24.018892));
  12. buh.bindInfoWindowHtml("Бухгалтерские услуги в Жабинке.
  13. тел. (029) 791-36-35
  14. <a href='http://myzha.ru/blogs/i-snova-cifry/buhgalterskie-uslugi.html'>Подробнее</a>");
  15. map.addOverlay(buh);
  16. var pmk = new GMarker(new GLatLng(52.204793,24.01577));
  17. pmk.bindInfoWindowHtml("Жабинковская ПМК-10");
  18. map.addOverlay(pmk);
  19. }
  20. }
  21. </script>
  22. <div id="map_canvas" style="width: auto; height: 650px"> </div>
  23. <form action="#" onsubmit="animate(); return false">
  24. <p style="align:center;"><input type="submit" value="В Жабинку!" /></p>
  25. </form>
Данный код выводит по центру Карту Жабинки с двумя маркерами, при клике по маркеру выводится информационное окно.
4. Для отображения карты необходимо в вашем шаблоне тег <body> заменить на:
  1. <body onload="initialize()" onunload="GUnload()">
Теперь карта будет выводиться у вас на сайте в созданном вами разделе.

Свои доработки можете внести изучив Google Maps API.

Если Вам помог данный пост, то можете отблагодарить обнищавших беларусов на следующие кошельки:

Z323463082276
R424952045943


На все Ваши вопросы постараюсь ответить (просьба вопросы задавать по проделанной работе, в API Google Maps я не вникал, а ознакомился лишь с функциями которые были необходимы для реализации задумки, в дальнейшем при наличии свободного времени и новых идей будут доработки и возможно существенные).

Ознакомиться с готовым примером можно по адресу: http://myzha.ru/karta-zhabinki
+2
russianru russianru 10 лет назад #
былобы классно еслибы такая карта стаяла в профили пользывателя и указывала ево город
0
olegan olegan 10 лет назад #
А несколько городов для одного сайта можно сделать?
+3
r2 r2 10 лет назад #
вы используете API версии 2, она устарела
в 3-й версии даже ключ не нужно получать
+2
wmaximum wmaximum 10 лет назад #
Сейчас я работаю над API 3 совместно с OSM, как только немного доведу до ума, так обязательно поделюсь.
0
googlebot googlebot 10 лет назад #
openstreetmap еще посмотрите.
0
wmaximum wmaximum 10 лет назад #
сейчас над этим и работаю, об этом и написал выше
0
PrazdNik PrazdNik 10 лет назад #
былобы классно еслибы такая карта стаяла в профили пользывателя и указывала ево город
это было бы очень хорошо!
0
wmaximum wmaximum 10 лет назад #
Не могу немного въехать в API v.3, добавляю по аналогии с моим примером 2 маркера, при клики по которым должно появиться инфоокно, добавляю все это используя следующий код
Код PHP:
    var buhcontent = '<div style="text-align:center"><strong>Оперный театр им. А. С. Пушкина</strong><br><img src="http://webmap-blog.ru/examples/files/yanmap_z5_2.jpg" width="200" height="138" /><br>ул. Белинского, д. 59</div>';
        
    var infowindow = new google.maps.InfoWindow({
        content: buhcontent
    });
 
    var buh = new google.maps.Marker({
        position: new google.maps.LatLng(52.19531,24.018892),
        map: map,
        title: 'Оперный театр им. А. С. Пушкина'
    });
markers.push(buh);
    google.maps.event.addListener(buh, 'click', function() {
      infowindow.open(map,buh);
    });




    var pmkcontent = '<div style="text-align:center"><strong>Оперный театр им. А. С. Пушкина</strong><br><img src="http://webmap-blog.ru/examples/files/yanmap_z5_2.jpg" width="200" height="138" /><br>ул. Белинского, д. 592323</div>';
        
    var infowindow = new google.maps.InfoWindow({
        content: pmkcontent
    });
 
    var pmk = new google.maps.Marker({
        position: new google.maps.LatLng(52.204793,24.01577),
        map: map,
        title: 'Оперный театр им. А. С. Пушкина'
    });
markers.push(pmk);
    google.maps.event.addListener(pmk, 'click', function() {
      infowindow.open(map,pmk);
    });
:

Но описание инфокно появляется всего одно, как сделать чтобы описания были разные?
0
wmaximum wmaximum 10 лет назад #
У меня при клике по любому из маркеров вылазит описание из:
Код PHP:
 var pmkcontent = '<div style="text-align:center"><strong>Оперный театр им. А. С. Пушкина</strong><br><img src="http://webmap-blog.ru/examples/files/yanmap_z5_2.jpg" width="200" height="138" /><br>ул. Белинского, д. 592323</div>';
0
r2 r2 10 лет назад #
потому что у вас переменная infowindow одна
вы ее инициализируете дважды, первый раз впустую, т.к. второй раз она перетирается
вот и получается что описание одно
0
wmaximum wmaximum 10 лет назад #
Спасибо, этот момент я упустил (( Сейчас все заработало. ОДна голова хорошо, а две лучше...
0
wmaximum wmaximum 10 лет назад #
Перевел на API v.3 + карта Open Street Maps, если кому интересно, то можете посмотреть исходник либо у меня на сайте, либо могу выложить в блоге по просьбам. Также в тестовом режиме запустил расчет расстояний.
0
PrazdNik PrazdNik 10 лет назад #
есть какая-то возможность прикрутить к профилям пользователей?
0
wmaximum wmaximum 10 лет назад #
Над этим вопросом я не задумывался, но думаю, что при желании можно реализовать все.
0
vadimry vadimry 10 лет назад #
все сделал как написано - ничего не вышло. может координаты другие ввести надо?
0
vadimry vadimry 10 лет назад #
уточняю - пустой экран. у меня движок 1.6.2. может в этом дело?
0
wmaximum wmaximum 10 лет назад #
Врятли в движке дело, посмотрите исходный код страницы, все ли там отображается? Также возможно, что блокируются скрипты, попытайтесь использовать другой браузер
0
Devvver Devvver 10 лет назад #
Как бороться с проблемой - Инстанс вырезает код JS с страницы (добавляю через источник)
+1
wmaximum wmaximum 10 лет назад #
Попробуйте использовать другой редактор, например я работаю через FCKEditor, также проблем с пропаданием кода небыло замечено в Imperavi. Эксперементируйте.

Еще от автора

Случайные статьи от 17.10.2011
Вашему вниманию обновленная и доработанная версия модуля.
Случайные статьи (обновлено 17.10.2011)
Давно хотел реализовать у себя на сайте вывод случайных статей, но вывод не просто статей а оформить красивым блоком...
Переделка форума в 1.7 (часть 2)
Как я обещал в предыдущем своем посте по Переделке форума, выкладываю переделанный вариант с постами.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.