Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
Node is saved as draft in My Content >> Draft
  • Google API in .NET

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 33
    Comment on it

    Using google API in the .NET is the thing that needs to be performed again and again. So when you need to display data in the form of map locations or need to dispaly it using the google maps you need to integrate it with the google API.

     

    <style type="text/css">
    html { height: 100% }
    body { height: 100%; margin: 0; padding: 0 }
    #map_canvas { height: 100% }
    </style>
    <script type="text/javascript" src = "https://maps.googleapis.com/maps/api/js?key=AIzaSyC6v5-2uaq_wusHDktM9ILcqIrlPtnZgEk&sensor=false">
    </script>
    
    
    
    
    
    
    
    
    <script type="text/javascript">
        function initialize() {
            var markers = JSON.parse('<%=ConvertDataTabletoString() %>');
            var mapOptions = {
            center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
    zoom: 5,
    mapTypeId: google.maps.MapTypeId.ROADMAP
    //  marker:true
    };
    var infoWindow = new google.maps.InfoWindow();
    var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
    var image;
    for (i = 0; i < markers.length; i++) {
    var data = markers[i]
    var myLatlng = new google.maps.LatLng(data.lat, data.lng);
    
    var contentString = '<div id="content" style="margin-left:15px; margin-top:3px;overflow:hidden;">' +
    '<div id="bodyContent">' + '<img src=' + data.image + ' style="width:172px;height:45px;"  alt="WebStreet.in"/>' + '<br><font style="color:darkblue;font:11px tahoma;margin-left:5px;">' + data.title + ' Your Trusted IT Solutions Provider</font>' +
    '</div>' +
    '</div>';
    
    
    //var marker = new google.maps.Marker({
    
    //position: myLatlng,
    //map: map,
    //title: data.title,
    //});
    
    var marker = new google.maps.Marker({
        map: map,
        // draggable:true,
        // animation: google.maps.Animation.DROP,
        position: myLatlng,
        title: data.title,
        icon: 'http://maps.google.com/mapfiles/kml/pal3/icon55.png' // null = default icon
    });
    
    
        // Start of newly added code block
    
    var infowindow = new google.maps.InfoWindow({
        content: contentString,
        width: 192,
        height: 100
    });
    
    
    (function (marker, data) {
    
        // Attaching a click event to the current marker
        google.maps.event.addListener(marker, "click", function (e) {
            infoWindow.setContent(data.description);
            infowindow.open(map, marker);
        });
    
    
    
    
    })(marker, data);
    
    
    }
        
         
            // End of newly added code block
        }
    
    
    
    </script>

     

     

    You need to add script into your page to integrate it with the application and with the database.

     

    .net

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: