Примеры работы с разными map API

Есть много статей на тему знакомства с Google Map Api и Yandex Map Api, но про остальные картографические сервисы не так много практического материала. В недавнем времени работал с Api:

1. Google map
2. Yandex map
3. Yahoo map
4. Bing map
5. OpenStreet map

И хотел обобщить работу с вышеупомянутыми сервисами, а именно инициализация карты и установление маркеров по клику мышки. Материалы в статье представлены в виде Html кода, javascript и результата — скриншота, а так же исходники на vs 2010 MVC3.

С Google map ситуация проще всего: практического материала много, мой пример выглядит следующим образом:
Html page:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false" ></script> 
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/LoadGoogle.js")"  type="text/javascript"></script>
<h2>GoogleMap</h2>
<div id="map" style="width: 1400px; height: 500px;"></div>

Script:

$(document).ready(function () {
 initialize();
});
//инициализация карты в div "map"
function initialize() {
    var haightAshbury = new google.maps.LatLng(51.0532, 31.83);//(долгота, широта)
    var mapOptions = {
        zoom: 12,//масштаб
        center: haightAshbury,//позиционируем карту на заданые координаты
        mapTypeId: google.maps.MapTypeId.TERRAIN//задаем тип карты
    };    
    map = new google.maps.Map(document.getElementById("map"), mapOptions);//инициализация карты
 
    google.maps.event.addListener(map, 'click', function (event) {
        addMarker(event.latLng);
    });//добавляем событие нажание мышки
}
//функция добавления маркера
function addMarker(location) {
 
    var shadow = new google.maps.MarkerImage('/Images/roles.png',    
    new google.maps.Size(37, 32),
    new google.maps.Point(0, 0),
    new google.maps.Point(0, 32)); // Теневое изображение
 
    var image = new google.maps.MarkerImage('/Images/smilies.png',
      new google.maps.Size(20, 32),
      new google.maps.Point(0, 0),
      new google.maps.Point(0, 32)); //изображение маркера
 
    marker = new google.maps.Marker({
        position: location,
        map: map,
        shadow: shadow,
        icon: image,
        title: "My title!)",
        zIndex: 999
    });//добавление маркера

В результате получим карту Google c возможностью добавлять маркеры:



Для инициализации Yandex map вам понадобится ключ доступа к сервису и следующий пример:
Html page:

<script src="http://api-maps.yandex.ru/1.1/index.xml?key=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/LoadYandex.js")"  type="text/javascript"></script>
<h2>YandexMap</h2>
 <div id="YMapsID" class="YMaps YMaps-cursor-grab" style="width: 1400px; height: 500px;">
 </div>

Script:

$(document).ready(function () {
 initialize();
});
function initialize() {
    map = new YMaps.Map(document.getElementById("YMapsID"));//инициализация карты
    map.setCenter(new YMaps.GeoPoint(31.87, 51.0532)//(широта, долгота)
                    , 12    //Масштаб
                    , YMaps.MapType.MAP);//тип карты
 
    map.addControl(new YMaps.TypeControl());//смена типа карты
    map.addControl(new YMaps.ToolBar());//инструменты
    map.addControl(new YMaps.Zoom());//смена масштаба
    map.addControl(new YMaps.MiniMap());//Небольшая отображающая местоположение
    map.addControl(new YMaps.ScaleLine());//Отображение масштаба
 
    YMaps.Events.observe(map, map.Events.Click, function (map, mEvent) {
        addMarker(mEvent.getGeoPoint());
    });// событие щелчка мыши на карте
}
//функция добавления маркера 
function addMarker(location) {    
    var geoPlacemark = new YMaps.Placemark(new YMaps.GeoPoint(location.__lng, location.__lat), { draggable: 1 });
    //координаты добавления метки
    geoPlacemark.name = "Название чего то";
    geoPlacemark.description = "описание чего то";
    map.addOverlay(geoPlacemark);//добавление метки 
}

В результате получим карту Yandex c возможностью добавлять маркеры:



Обратите внимание на координаты, в Google идет сначала долгота, потом широта, а в Yandex наоборот!

Пример работы с Yahoo map api:
Html page:

<script type="text/javascript" src="http://api.maps.yahoo.com/ajaxymap?v=3.8&appid=appidhere"></script>
<script src="@Url.Content("~/Scripts/LoadYahoo.js")"  type="text/javascript"></script>
<body onload="initialize_ymap()">
    <h2>YahooMap</h2>
    <div id="ymap" style="width: 1400px;height: 500px;"></div>
</body>

Script:

function initialize_ymap() {
 
    var yPoint = new YGeoPoint(51.0532, 31.83);//(долгота, широта)
 
    var map = new YMap(document.getElementById('ymap'));//инициализация карты
 
    map.setMapType(YAHOO_MAP_SAT);//тип карты
 
    map.drawZoomAndCenter(yPoint, 6);//масштаб
 
    map.addTypeControl();//добавление контроля типа
 
    YEvent.Capture(map, EventsList.MouseClick, reportPosition);  //событие нажатия на карте
        //функция добавления маркера
        function reportPosition(_e, _c){  
            var mapmapCoordCenter = map.convertLatLonXY(map.getCenterLatLon()); //переобразование координат  
            var currentGeoPoint = new YGeoPoint( _c.Lat, _c.Lon );  //Точка куда нужно поставить маркер
            map.addMarker(currentGeoPoint); //Добавление маркера
        }   
}

В результате получим карту Yahoo c возможностью добавлять маркеры:



Для работы с Bing map api нужно взять ключ:
www.microsoft.com/maps/developers/web.aspx
Пример работы с Bing map api:
Html page:

<script charset="UTF-8" type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
<script charset="UTF-8" type="text/javascript" src="https://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&s=1"></script>
<script src="@Url.Content("~/Scripts/LoadBing.js")"  type="text/javascript"></script>
<body onload="GetMap();">
<h2>BingMap</h2>
<div id='mapDiv' style="position:absolute; width:1400px; height:500px;"></div>
</body>

Script:

function GetMap() {
    var map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), { credentials: "ххххххххxxxxxxxxxxxxxxxxx",//ключ
        center: new Microsoft.Maps.Location(51.0532, 31.83),//(долгота,широта)
        mapTypeId: Microsoft.Maps.MapTypeId.road,//(тип карты)
        zoom: 8//масштаб
    });
    //Событие на кликание мышки на карте
    Microsoft.Maps.Events.addHandler(map, 'click', displayLatLong);
    function displayLatLong(e) {
        if (e.targetType == "map") {
            var point = new Microsoft.Maps.Point(e.getX(), e.getY());//координаты вставки маркера
            var loc = e.target.tryPixelToLocation(point);//позиция маркера
            var pin = new Microsoft.Maps.Pushpin(loc);//маркер
            map.entities.push(pin);//вставляем маркер
        }
    }
}

В результате получим карту Bing c возможностью добавлять маркеры:



Пример работы с OpenStreet map api:

Html page:

<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
 <script src="@Url.Content("~/Scripts/LoadOpenStreet.js")"  type="text/javascript"></script>
 
 <body onload="GetMap();">
    <h2>OpenStreetMap</h2>
    <div id="OSMap" style="position:absolute; width:1400px; height:500px;"></div>
 </body>

Script:

function GetMap() {
    map = new OpenLayers.Map("OSMap");//инициализация карты
    var mapnik = new OpenLayers.Layer.OSM();//создание слоя карты
    map.addLayer(mapnik);//добавление слоя
    map.setCenter(new OpenLayers.LonLat(31.83, 51.0532) //(широта, долгота)
          .transform(
            new OpenLayers.Projection("EPSG:4326"), // переобразование в WGS 1984
            new OpenLayers.Projection("EPSG:900913") // переобразование проекции
          ), 10 // масштаб
        );
    var layerMarkers = new OpenLayers.Layer.Markers("Markers");//создаем новый слой маркеров
    map.addLayer(layerMarkers);//добавляем этот слой к карте
    map.events.register('click', map, function (e) {    
        var size = new OpenLayers.Size(21, 25);//размер картинки для маркера
        var offset = new OpenLayers.Pixel(-(size.w / 2), -size.h); //смещение картинки для маркера
        var icon = new OpenLayers.Icon('/Images/smilies.png', size, offset);//картинка для маркера
        layerMarkers.addMarker(//добавляем маркер к слою маркеров
            new OpenLayers.Marker(map.getLonLatFromViewPortPx(e.xy), //координаты вставки маркера
            icon));//иконка маркера
    }); //добавление событие клика по карте
}

В результате получим карту OpenStreet c возможностью добавлять маркеры:



Вот такие интересные примеры работы с картами, думаю кому то будут полезны.

Исходники на VS2010 MVC3.