Geekly Articles each Day
📜 ⬆️ ⬇️

Examples of working with different map API


There are many articles on acquaintance with Google Map Api and Yandex Map Api, but there is not much practical material about other map services. Recently I worked with Api:
  1. Google map
  2. Yandex map
  3. Yahoo map
  4. Bing map
  5. Openstreet map

And I wanted to summarize the work with the above-mentioned services, namely, initialization of the map and the establishment of markers on a mouse click. The materials in the article are presented in the form of Html code, javascript and the result - a screenshot, as well as the source for vs 2010 MVC3.

The situation with the Google map is the easiest: there is a lot of practical material, my example is as follows:
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 });//

As a result, we get a Google map with the ability to add markers:


')
To initialize the Yandex map you will need a service access key and the following example:
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);//  }

As a result, we get a Yandex map with the ability to add markers:



Pay attention to the coordinates, google longitude first, then latitude, and vice versa in Yandex!

An example of working with 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); //  } }

As a result, we get a Yahoo map with the ability to add markers:



To work with Bing map api you need to take the key:
www.microsoft.com/maps/developers/web.aspx
Example of working with 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);//  } } }


As a result, we get a Bing map with the ability to add markers:



An example of working with 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));//  }); //     }

As a result, we get an OpenStreet map with the ability to add markers:



These are interesting examples of working with maps, I think someone will be useful.

Sources on VS2010 MVC3 .

Source: https://habr.com/ru/post/131249/

More articles:


All Articles