Monday, March 4, 2013

View map with Specified Lattitude & Longitude using ASP.NET


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Sample-Map</title>

   <script src="http://maps.googleapis.com/maps/api/js?v=3.1&amp;sensor=false">
    </script>

   <script>
        function initialize(obj)
         {
             document.getElementById("googleMap").style.width = screen.availWidth - 50;
             document.getElementById("googleMap").style.height = screen.availHeight-100;
     
             var subjlat;
             var subjlng;
             var addr;
             var myLatlng;
             var LatLongDescVal = obj.split("||");
             var LatLong;
           
           
             if (LatLongDescVal.length>0)
             {
                     LatLong = LatLongDescVal[0].split("|");
                     subjlat = LatLong[0];
                     subjlng = LatLong[1];
                     addr = LatLong[2];
                     myLatlng = new google.maps.LatLng(subjlat, subjlng);
                         var myOptions = {
                             zoom: 12,
                             center: myLatlng,
                             mapTypeId: google.maps.MapTypeId.ROADMAP,
                            mapTypeControl: true, mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DROPDOWN_MENU },
                            navigationControl: true, navigationControlOptions: { style: google.maps.NavigationControlStyle.SMALL },
                            streetViewControl: true
                        }
               
                 var map = new google.maps.Map(document.getElementById("googleMap"), myOptions);
                 var marker = new google.maps.Marker({ position: myLatlng, title: addr, map: map });
                   marker.setMap(map);
               
                  for (var i = 1; i < LatLongDescVal.length; i++)
                  {
                        LatLong = LatLongDescVal[i].split("|");
                         subjlat = LatLong[0];
                         subjlng = LatLong[1];
                         addr = LatLong[2];
                         myLatlng = new google.maps.LatLng(subjlat, subjlng);              
                        var marker = new google.maps.Marker({
                            position: myLatlng,
                            map: map,
                           title: addr
                       });

                   }
                 
                           
             }
             else
             {
                 alert("Map Unavailable.");
                 return false;
               
             }
 

        }


    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div id="googleMap" style="height: 550px; width: 900px;">
    </div>
<input id="btnViewMap" name="btnViewMap" onclick="initialize('40.4111765968185|-74.2146131959166|129 ANDOVER LA||');" type="button" value="View Map" />

    </form>
</body>
</html>
</div>




No comments:

Post a Comment