Yahoo! Maps APIs let you easily embed rich and interactive maps into your web and desktop applications using your choice of platform.
Make your web site or application come alive with rich contextual maps, location-relevant content, and dynamic user interaction. Integrate a store locator with a few lines of code, view highway traffic patterns, or create custom routes - whatever you can imagine, Yahoo! Maps web services make it easy to build into your app. Yahoo! Maps' built-in Geocoder lets you specify an address or latitude/longitude coordinates: no need to call an additional service or write special code.
<head runat="server">
<title>Untitled Page/title>
<script type="text/javascript"
src="http://api.maps.yahoo.com/ajaxymap?v=3.8&appid=YD-eQRpTl0_JX2E95l_xAFs5UwZUlNQhhn7lj1H">
/script>
<style type="text/css">
map{
height: 75%;
width: 100%;
}
/style>
/head>
<body>
<form id="form1" runat="server">
<input type="text" id="search" name="search"/>
<input type="submit" onClick="searchMap(document.getElementById('search').value);return false;"/>
<div id="map">/div>
<script type="text/javascript">
// Create a Map that will be placed in the "map" div.
var map = new YMap(document.getElementById('map'));
// Create an array to contain the points of our polyline
polylinePoints = [];
function startMap(){
// Add the ability to change between Sat, Hybrid, and Regular Maps
map.addTypeControl();
// Add the zoom control. Long specifies a Slider versus a "+" and "-" zoom control
map.addZoomLong();
// Add the Pan control to have North, South, East and West directional control
map.addPanControl();
// Specifying the Map starting location and zoom level
map.drawZoomAndCenter("DELHI", 3);
// Add an event to report to our Logger
YEvent.Capture(map, EventsList.MouseClick, myCallback);
YEvent.Capture(map, EventsList.MouseDoubleClick, removeMarker);
function removeMarker(_e,_c)
{
alert('Hello');
currentGeoPoint = new YGeoPoint( _c.Lat, _c.Lon);
map.removeMarker(currentGeoPoint);
}
function myCallback(_e, _c){
/*
It is optional to specify the location of the Logger.
Do so by sending a YCoordPoint to the initPos function.
*/
var mapCoordCenter = map.convertLatLonXY(map.getCenterLatLon());
YLog.initPos(mapCoordCenter); //call initPos to set the starting location
currentGeoPoint = new YGeoPoint( _c.Lat, _c.Lon);
placeMarker(currentGeoPoint);
// displayPolyLines(currentGeoPoint);
}
function placeMarker(geoPoint){
map.removeMarkersAll()
var mapCoordCenter = map.convertLatLonXY(map.getCenterLatLon());
YLog.initPos(mapCoordCenter); //call initPos to set the starting location
// Printing to the Logger
var str;
// str="Adding marker at....";
// str+="Latitude:" + geoPoint.Lat;
// str+="Longitude:" + geoPoint.Lon;
YLog.print("Adding marker at....");
YLog.print("Latitude:" + geoPoint.Lat + "Longitude:" + geoPoint.Lon);
var newMarker= new YMarker(geoPoint,createCustomMarkerImage());
newMarker.addAutoExpand("Hello");
var value1= document.getElementById('search');
var markerMarkup =value1.value;
markerMarkup += " easy";
YEvent.Capture(newMarker, EventsList.MouseClick,
function(){
newMarker.openSmartWindow(markerMarkup);
});
// map.addMarker(geoPoint);
map.addOverlay(newMarker);
}
function displayPolyLines(g_point){
polylinePoints.push(g_point);
if (canDisplayPolyLines){
map.addOverlay(new YPolyline(polylinePoints, 'black',7,0.7));
YLog.print("Polyline added lines");
}
}
this.canDisplayPolyLines = function() {
// Check to make sure we have at least 2 points to connect
return (polylinePoints.length > 1);
}
function createCustomMarkerImage(){
var myImage = new YImage();
myImage.src = 'http://us.i1.yimg.com/us.yimg.com/i/us/map/gr/mt_ic_c.gif';
myImage.size = new YSize(20,20);
myImage.offsetSmartWindow = new YCoordPoint(0,0);
return myImage;
}
}
window.onload= startMap;
/script>
/form>
/body>
/html>
2 comments:
i do not know how to use yahoo map api in asp.net.i go through your code till now i am unable to get it properly.
can u explain me it more clearly.
Regards
Shafiur Rahaman
shafiur.rahaman@gmail.com
what type of errors are displayed.Here it is working properly.
Post a Comment