Skip to main content

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="https://maps.googleapis.com/maps/api/js?key=Your Key" type="text/javascript"></script>

</head>


Add Map loading js function mentioned below




Next Add Show Marker function inside of body.


Declare the variable mentioned below



Please refer below full js script on map loading and Show marker.

<script type="text/javascript">

        var map = null;

        var cordinate = { lat: 23.805450, lng: 78.486328 };


        function loadMap() {

            map = new google.maps.Map(document.getElementById("Map"),

                {

                    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

                });

            showMarker(cordinate);


        }


        function showMarker(myLatLng) {

            new google.maps.Marker({

                position: myLatLng,

                map

            });

        }

    </script>

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!


Comments

Post a Comment

Popular posts from this blog

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: Google provides the free API to integrate Google Maps in our application. 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">     ...
Post a Comment
Read more