Как сделать карту на сайт

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

Карты для сайта бывают разные и от разных "производителей". Я будуть писать о картах от гугла. Собственно вариантов карт для сайта они предлагают 3:
1)Статические - когда есть картинка местности и Ваша точка, отмеченная маркером. Недостатки собственно вытекают из того что карта статическая - масштаб со стороны пользователя не меняются, как и вид отображения. В случае с картами на сайт от гугла еще и необходимость регистрироваться и получать код для использования карт - хотя и бесплатно но время занимает.
2)Флеш-версия. Недостатков статики лишена, но подробнее описать затрудняюсь - не люблю вообще применять флеш на сайте, потому сразу перейдем к 3-му варианту.
3)Java-scipt версия карты для сайта. Регистрации для использования не требует, выглядит так, как и на официальном сайте, есть масштабирование, слои, виды и прочие прелести. Вы можете задавать размер карты для вставки в существующую структуру сайта, динамически выводить несколько карт с разными координатами, создать свой заголовок для маркера и прочие прелести.Её в примере мы и будем делать.

Теперь собственно о том как ее, карту, на сайт сделать. Способов существует множество - все они описаны в документации, которая у гугла, к сожалению, на буржуйском. Потому я опишу один, простой, способ. Кому интересно тот, покопавшись, найдет остальные. Ну а кому надо "чтобы работало" - берем готовый вариант карты для сайта и вставляем, не забыв поменять координаты и заголовок.

Нам понадобится - блок где будет карта, описываем его:

<div id="map_canvas" style="height: 400px; width: 570px; border:1px solid #ccc; margin-top: 10px;"></div>
Блок для карты на сайте сделан, пишем собственно сам скрипт ее вставки:
<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 marker = new google.maps.Marker({
                                     position: myLatlng,
                                     map: map,
                                     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>
Все, карта сделана. Что получилось?

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

Вот собственно и все о том как сделать карту на сайт :) До встречи на страницах блога!
PS: Написал дополнение о том как сделать свои маркеры на карте, прочитать можно здесь