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