Skip to main content

How to Integrate and Loading the Google Map in asp.net

How to Integrate and Loading the Google Map in asp.net


In this article I am going to explain to you about Google Maps and how to integrate in ASP.NET.

Google Maps is a web mapping platform and consumer application offered by Google. It offers satellite imagery, aerial photography, street maps, 360° interactive panoramic views of streets (Street View), real-time traffic conditions, and route planning for traveling by foot, car, air (in beta) and public transportation.

Key points for integrating Google Maps:
  1. Google provides the free API to integrate Google Maps in our application.
  2. You can customize Google Maps depending on your requirements.

First of all, to integrate Google Maps create a new project in Visual studio. Add a new webform as follows.

Step 1:

  • Create a new project in visual studio. 
  • Add a new web form or existing form.

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

</head>

<body>

    <form id="form1" runat="server">

        <div id="map" style="width: 100%; height: 500px;"></div>

    </form>

</body>

</html>

Step 2:

  • Add the following script in the head section. 

<body>
    <form id="form1" runat="server">
        <div id="map" style="width: 100%; height: 500px;"></div>
    </form>
    <script type="text/javascript">
        var map = null;
        function initMap() {
            map = new google.maps.Map(document.getElementById("map-dsply"),
                {
                    center: new google.maps.LatLng(23.805450, 78.486328),
                    zoom: 4,
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                    panControl: true,
                    zoomControl: true,
                    zoomControlOptions: {
                        style: google.maps.ZoomControlStyle.SMALL,
                        position: google.maps.ControlPosition.LEFT_CENTER
                    },
                    streetViewControl: false,
                    fullscreenControl: false
                });
        }
    </script>
</body>

Now run the application, the map will look as in the following:


I hope you like it. Thank you for reading. Have a nice Day!

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4459976192218248"

     crossorigin="anonymous"></script>

Comments

Post a Comment

Popular posts from this blog

Show the Marker on Map using Google Map JavaScript API in ASP .NET

In this articles we learn how to show the marker on the google map in ASP .NET Application. The articles proceeds through the step to integration of the google map API's and Show the marker on the map.   Step 1: Create a new project in visual studio.  Add a new web form or existing form. <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server">     <title></title> </head> <body>     <form id="form1" runat="server">         <div id="map" style="width: 100%; height: 500px;"></div>     </form> </body> </html>   Step 2: Next Add Script for loading the map and maker. Add the following script in the head section. <head runat="server">     <title></title>     <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>     <script src...
Post a Comment
Read more