Asp.net programming we consider all important topic for knowledge about controls,web Services, JSON, Ajax, database, and interview related Question. In this Asp.net and sql server tutorial blog we give many examples of jquery as like How Play YouTube Video in Your Asp.net Website by URL, How to Play YouTube Videos in Asp.net by using Jquery , Jquery Change div background on mouseover in asp.net , JQuery UI Datepicker (Calendar) etc.

Friday, October 17, 2014

Integrate or show Google Maps in asp.net web site

Integrate or show or Add Google Maps in asp.net web site:



In this Post I will explain how to integrate Google map by JavaScript in asp.net web site or show Google map in asp.net web Page. In this asp.nettutorial blog we give other Post related to google map application in asp.net with different-different work Example. These are:-

JavaScript function for add map in asp.net page:

function initialize() {
            var myLatlng = new google.maps.LatLng(-34.397, 150.644)
            var mapOptions = {
                center: myLatlng,
                zoom: 8,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                marker: true
            };
            var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
        }

Style of this asp.net page for display google Map:

<style type="text/css">
        html
        {
            height: 100%;
        }
        body
        {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        #map_canvas
        {
            height: 100%;
        }
        .style1
        {
            color: #990000;
            text-decoration: underline;
            font-size: x-large;
            font-family: Arial, Helvetica, sans-serif;
        }
    </style>

Show google Mape by JavaScript in asp.net web Aplication:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Map.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Integrate Google Maps in asp.net web</title>
    <style type="text/css">
        html
        {
            height: 100%;
        }
        body
        {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        #map_canvas
        {
            height: 100%;
        }
        .style1
        {
            color: #990000;
            text-decoration: underline;
            font-size: x-large;
            font-family: Arial, Helvetica, sans-serif;
        }
    </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 myLatlng = new google.maps.LatLng(-34.397, 150.644)
            var mapOptions = {
                center: myLatlng,
                zoom: 8,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                marker: true
            };
            var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
        }
    </script>
</head>
<body onload="initialize()">
    <form id="form1" runat="server">
   <div align="center">
   <h2 class="style1"> Integrate Google Maps in asp.net web site</h2>
    <div id="map_canvas" style="width: 800px; height: 500px">
    </div>
   </div>
    </form>
</body>
</html>
 
Integrate or show Google Maps in asp.net web site
Integrate Google Maps web site


Asp.net Grid View Related Post:

No comments:

Post a Comment