Search code examples
asp.netmapsyahoo-maps

How to integrate Yahoo map in ASP.Net website


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!


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