How to integrate Yahoo map in ASP.Net website

StackOverflow https://stackoverflow.com/questions/3854910

  •  27-09-2019
  •  | 
  •  

Question

How to display yahoo static map in gridview if we pass address as query string? Also please tell how to display dynamic yahoo maps also. I have searched about yahoo maps and got the following links http://developer.yahoo.com/flash/maps/examples.html, http://developer.yahoo.com/maps/rest/V1/ and http://developer.yahoo.com/maps/. I did not get any link which has code for integrating yahoo map in an ASP.Net website!

Was it helpful?

Solution

I have created yahoo dynamic map, the address can be passed as value of a hidden field present in the page. The value for hidden field can be dynamically passed in page_load event. I have created this in the child page encapsulated by master page in ASP.Net.

Before starting, the user has to generate Application ID for using yahoo maps by logging into your yahoo ID and navigating to this link https://login.yahoo.com/config/login_verify2?.src=devnet&.done=http://developer.apps.yahoo.com/wsregapp/ and providing our website URL.

The code for displaying yahoo map is given below:

.map { height: 400px; width: 700px; font-family:Verdana; font-size:11px; font-weight:bold; } 

<script type="text/javascript" src="http://api.maps.yahoo.com/ajaxymap?v=3.8&appid=YourAPPID">  
</script>

<script type="text/javascript">

    // Capture the user mouse-click and expand the SmartWindow
    function onSmartWinEvent() {


        // Create a map object
        var map = new YMap(document.getElementById('<%= map.ClientID %>'));
        // Add a pan control
        map.addPanControl();
        // Add a slider zoom control
        map.addZoomLong();
        // Display the map centered on the address specified          
        map.drawZoomAndCenter(document.getElementById('<%= HiddenField1.ClientID %>').value, 3);
        // Create a marker positioned at the address specified
        var marker = new YMarker(document.getElementById('<%= HiddenField1.ClientID %>').value, createCustomMarkerImage());
        // Add a label to the marker
        //marker.addLabel("<blink>*</blink>");
        // Call onSmartWinEvent when the user clicks on the marker 
        YEvent.Capture(marker, EventsList.MouseClick, onSmartWinEvent);
        // Display the marker 
        map.addOverlay(marker);


        var words = document.getElementById('<%= HiddenField1.ClientID %>').value;
        marker.openSmartWindow(words);

        // Add map type control   
        map.addTypeControl();
        // Default map to satellite (YAHOO_MAP_REG) -- other opts: YAHOO_MAP_HYB,YAHOO_MAP_SAT
        map.setMapType(YAHOO_MAP_REG);
    }

    function createCustomMarkerImage() {
        var myImage = new YImage();
        myImage.src = 'http://l.yimg.com/www.flickr.com/images/dot_splat.png';
        myImage.size = new YSize(30, 31);
        myImage.offsetSmartWindow = new YCoordPoint(15, 15);
        return myImage;
    }
</script>

<table width="100%" align="left">        
    <tr>
        <td>
            <body onload="onSmartWinEvent()">
                <div id="map" class="map" runat="server">
                </div>
                <asp:HiddenField ID="HiddenField1" runat="server" />
            </body>
        </td>
    </tr>
</table>

NOTE: Rate limiting: The Yahoo! AJAX Maps API is limited to 50,000 queries per IP per day. Check this link http://developer.yahoo.com/search/rate.html

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top