Как сделать карту - часть вторая

Ранее я уже писал о том как сделать географическую карту на сайт (здесь). Сегодня хочу немного расширить тот материал, а именно рассказать о том как сделать собственный маркер на карте взамен стандартного, ну и раскрою еще несколько интересных моментов. Судя по комментариям к предыдущему материалу - тема интересует многих. Итак, поехали.

Сначала вспомним что было ранее - ссылка на материал есть выше, повторяться не буду. Здесь буду считать что делать то что ранее было описано Вы уже умеете. Поэтому сразу к расширениям. Для начала сделаем заготовки для маркера, нужно 2 рисунка, сам маркер и тень для него. Тень можно в принципе не делать, но убрать ее проще чем добавить, потому я ее опишу а добавлять или нет тень к маркеру - решайте сами. Вот я за пару минут набросал такие пикчи (художник из меня не очень - потому вот так вот) и

Описываем маркеры (часть скрипта)

var logo = new google.maps.MarkerImage('/images/stories/formaterials/marker.gif',
							new google.maps.Size(48, 35),
							new google.maps.Point(0, 0),
							new google.maps.Point(24, 35)); //изображение маркера

Собственно, код очень простой. Первая строка - путь к изображению, дальше его размер и последняя точка - точка маркера, которой будет помещена на карту. У нас это середина нижней стороны, точка с координатами 24,24. Далее пишем аналогичную запись для тени, с той лишь разницей, что тень наклонена и центр немного смещен.
var logoshadow = new google.maps.MarkerImage('/images/stories/formaterials/marker_shadow.gif',
							new google.maps.Size(47, 25),
							new google.maps.Point(0, 0),
							new google.maps.Point(20, 25)); //изображение тени маркера

Код вставки карты претерпит небольшие изменения - в части описания новых маркеров, в итоге получим что-то вроде:
<script type="text/javascript">
        <!--
            function initialize() {
                        var myLatlng = new google.maps.LatLng(55.752786,37.618293);
                           //координаты - будьте внимательны, у яндекса и гугла они поменяны местами
                        var myOptions = {
                        zoom: 17,
                        center: myLatlng,
                        markers: myLatlng,
                        mapTypeId: google.maps.MapTypeId.ROADMAP
                                        }
                        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
 
var logo = new google.maps.MarkerImage('/images/stories/formaterials/marker.gif',
							new google.maps.Size(48, 35),
							new google.maps.Point(0, 0),
							new google.maps.Point(24, 35)); //изображение маркера
 
var logoshadow = new google.maps.MarkerImage('/images/stories/formaterials/marker_shadow.gif',
							new google.maps.Size(47, 25),
							new google.maps.Point(0, 0),
							new google.maps.Point(20, 25)); //изображение тени маркера
 
                       var marker = new google.maps.Marker({
                                     position: myLatlng,
                                     map: map,
				     icon: logo,
                                     shadow: logoshadow,
                                     title: '"Кузница Кадров"'
                                        //заголовок маркера
                                    });
 
		}
 
            function loadScript() {
                var script = document.createElement("script");
                script.type = "text/javascript";
                script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=initialize";
                document.body.appendChild(script);
            }
            window.onload = loadScript;
        //-->
        </script>
Все, маркеры сделаны.

Получаем результат вставки карты на сайт:

Немного о дополнительных параметрах:
Строка "mapTypeId: google.maps.MapTypeId.ROADMAP" определяет тип карты, в нашем случае это дорожная карта, но можно сменить тип на SATELLITE (спутниковая карта), HYBRID (карта-гибрид) или TERRAIN (ландшафтная карта).
Строки "center: myLatlng, markers: myLatlng," задают соответственно сентр карты и положение маркера. Обычно они, как и в нашем случае, совпадают. Если же у Вас несколько маркеров - то можете прописать центр где-то между ними, ну или придумать что-то на свое усмотрение.
Если у Вас несколько маркеров накладываются друг на друга то можете добавить в описание маркера параметр "zIndex: Integer". Тогда выше других будет маркер с наибольшим значением zIndex (будьте внимательны - в ccs пишется "z-index", в параметрах маркера "zIndex").
Вот собственно и все чем хотелось дополнить материал о создании карты. До встречи на страницах блога, пишите комментарии, задавайте вопросы.