1. Goole все таки по мощнее будет Yandex
2. Не складывается у меня работа с Яшей, уж не любит мои он сайты, фильтрует и банит :) ... поэтому с google будет как то поспокойнее.
Здесь я выложу уже готовый пример того, что я сделал, а также ссылки и комментарии к коду. Как всегда - наука вам, памятка мне.
1. Первое что нам надо, это получить ключик для нашего сайта. Идем вот сюда - http://code.google.com/intl/ru-RU/apis/maps/signup.html (там вводим ваш домен, можно http://mysite.ru, http://mysite - если вы на компьютере тестите)
2. Подключаем все скрипты (далее идет код, который вы можете просто скопировать и вставить в любом месте в php или html странице)
<script src="http://maps.google.com/maps?file=api&v=2&key=ВАШ_КЛЮЧ" type="text/javascript"></script>
<script type="text/javascript">
// Объявляем глобальную переменную
var map;
// Сама функция карты Google
function initialize() {
if (GBrowserIsCompatible()) {
// mmdev_maps - это объект в который будет вставлена карта
map = new GMap2(document.getElementById("mmdev_maps"));
// Устанавливаем по умолчанию камеру; 55.796034,49.105196 - координаты; 5 - увеличение\отдаление
map.setCenter(new GLatLng(55.796034,49.105196), 5);
// Стандартные элементы управления
//map.setUIToDefault();
// Подключается класс, которые создает цветные маркеры на карте
var baseIcon = new GIcon(G_DEFAULT_ICON);
baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
baseIcon.iconSize = new GSize(20, 34);
baseIcon.shadowSize = new GSize(37, 34);
baseIcon.iconAnchor = new GPoint(9, 34);
baseIcon.infoWindowAnchor = new GPoint(9, 2);
// Функция которая добавляет надпись к маркеру и иконку
function createMarker(point, index, text) {
// Create a lettered icon for this point using our icon class
var letter = String.fromCharCode("A".charCodeAt(0) + index);
var letteredIcon = new GIcon(baseIcon);
letteredIcon.image = "http://www.google.com/mapfiles/marker" + letter + ".png";
markerOptions = { icon:letteredIcon };
var marker = new GMarker(point, markerOptions);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(text);
});
return marker;
}
// Добавляем на карту маркер - Казань
var latlng = new GLatLng(55.796034,49.105196);
map.addOverlay(createMarker(latlng, 1, 'Это Казань'));
// Добавляем на карту маркер - Москву
var latlng = new GLatLng(55.752815,37.622337);
map.addOverlay(createMarker(latlng, 1, 'А это Москва!'));
}
}
// Эта функция делает по центру город, который указан в какой либо ссылке
function animatemm(xxmm,yymm) {
map.panTo(new GLatLng(xxmm, yymm));
}
</script>
<a href='return false' onclick="animatemm(55.794719,49.107857);return false">Казань</a>,
<a href='return false' onclick="animatemm(56.327579,44.009857);return false">Нижний Новгород</a>,
<a href='return false' onclick="animatemm(55.752815,37.622337);return false">Москва</a>,
<a href='return false' onclick="animatemm(53.199041,50.173531);return false">Самара</a>
<div id="mmdev_maps" style="width: 620px; height: 400px"></div>
<script type="text/javascript">initialize();</script>
Вот и все :) ... этого мне вполне хватило, для реализации ТЗ, по текущему проекту. Если будут силы обязательно напишу плагин.
Понятные и простые примеры Google Maps Api >>> http://code.google.com/intl/ru-RU/apis/maps/documentation/javascript/v2/examples/index.html
