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:

Comments

Post a Comment