Идея создания карты города на основе яндекс карт, либо google maps в мое голове таилась уже давно, но на реализацию идеи как-всегда не хватало времени. Но вот несколько дней назад появился свободный часик, кооторый и был потрачен на реализацию данной затеи, ведь приобретать InstantMaps ради реализации обыкновенной карты совсем не хочется...
Для начала я опробывал карту Жабинки от яндекса, но она меня очень разочаровала, ее детализация для нашего маленького городка оставляла желать лучшего, а вот просмотрев Google maps я обрадовался, карта от гугла пусть и не очень детальна, но во сто крат детальнее карты от Яндекса. За реализацию карты на основе google maps я и взялся.
Описываю порядокмойих действий:
1. Получаем ключ через http://code.google.com/intl/ru/apis/maps/signup.html не забыв указать адрес сайта внизу. Надеюсь дальнейшие действия описывать не нужно )). (ключ можно сохранить как отдельно, так и уже полное описание подключения через скрипт.)
2. Далее создаю на своем сайте новый раздел "Карта Жабинки через Админка | Контент | Разделы и статьи.
3. В описании раздела переходим к редактированию исходного кода, где прописываем скрипт подключения и вывода карты, в моем слоучае он выглядел следующим образом:
Данный код выводит по центру Карту Жабинки с двумя маркерами, при клике по маркеру выводится информационное окно.
4. Для отображения карты необходимо в вашем шаблоне тег <body> заменить на:
Теперь карта будет выводиться у вас на сайте в созданном вами разделе.
Свои доработки можете внести изучив Google Maps API.
R424952045943
На все Ваши вопросы постараюсь ответить (просьба вопросы задавать по проделанной работе, в API Google Maps я не вникал, а ознакомился лишь с функциями которые были необходимы для реализации задумки, в дальнейшем при наличии свободного времени и новых идей будут доработки и возможно существенные).
Ознакомиться с готовым примером можно по адресу: http://myzha.ru/karta-zhabinki
Для начала я опробывал карту Жабинки от яндекса, но она меня очень разочаровала, ее детализация для нашего маленького городка оставляла желать лучшего, а вот просмотрев Google maps я обрадовался, карта от гугла пусть и не очень детальна, но во сто крат детальнее карты от Яндекса. За реализацию карты на основе google maps я и взялся.
Описываю порядокмойих действий:
1. Получаем ключ через http://code.google.com/intl/ru/apis/maps/signup.html не забыв указать адрес сайта внизу. Надеюсь дальнейшие действия описывать не нужно )). (ключ можно сохранить как отдельно, так и уже полное описание подключения через скрипт.)
2. Далее создаю на своем сайте новый раздел "Карта Жабинки через Админка | Контент | Разделы и статьи.
3. В описании раздела переходим к редактированию исходного кода, где прописываем скрипт подключения и вывода карты, в моем слоучае он выглядел следующим образом:
4. Для отображения карты необходимо в вашем шаблоне тег <body> заменить на:
Свои доработки можете внести изучив Google Maps API.
Если Вам помог данный пост, то можете отблагодарить обнищавших беларусов на следующие кошельки:
Z323463082276R424952045943
На все Ваши вопросы постараюсь ответить (просьба вопросы задавать по проделанной работе, в API Google Maps я не вникал, а ознакомился лишь с функциями которые были необходимы для реализации задумки, в дальнейшем при наличии свободного времени и новых идей будут доработки и возможно существенные).
Ознакомиться с готовым примером можно по адресу: http://myzha.ru/karta-zhabinki
в 3-й версии даже ключ не нужно получать
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); });Но описание инфокно появляется всего одно, как сделать чтобы описания были разные?
вы ее инициализируете дважды, первый раз впустую, т.к. второй раз она перетирается
вот и получается что описание одно