Asp.net Show (add) Markers on Google Map

-

How to create Markers on Google Map in asp.net Page:



In this Post we try to create a .aspx page of asp.net and put the marks on Google map for highlighting the Location in Map.
Some time we see this type of Application in Many web site. 
Here we try to do something like that.

Asp.net Show  Markers on Google Map:


Use this .Js file for add Mark in google Map in .aspx page.

http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false

Function for add Multiple Markers in asp.net on Google Map:

The following is the Client-side function () method functionality. In this JavaScript method, I used the javaString to fetch the value that I registered in the previous step. Going through the loop on the JavaString and plotting each location on the Google map.

<script type="text/javascript">
        window.onload = function () {
            var mapOptions = {
                center: new google.maps.LatLng(21.0000, 78.0000),
                zoom: 5,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
          
            google.maps.event.addListener(map, 'click', function (e) {

                var location = e.latLng;

                 var marker = new google.maps.Marker({
                    position: location,
                    map: map
                });
              
      google.maps.event.addListener(marker, "click", function (e) {
                    var infoWindow = new google.maps.InfoWindow({
           content: 'Latitude: ' + location.lat() + '<br />Longitude: ' + location.lng()
                    });
                    infoWindow.open(map, marker);
                });
            });
        };
    </script>

Adding markers to Google Maps in Asp.net:


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

<!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>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false"></script>
    <script type="text/javascript">
        window.onload = function () {
            var mapOptions = {
                center: new google.maps.LatLng(21.0000, 78.0000),
                zoom: 5,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);

            //--Attach click event handler to the map.
            google.maps.event.addListener(map, 'click', function (e) {

                //--Determine the location where the user has clicked.
                var location = e.latLng;

                //--Create a marker and placed it on the map.
                var marker = new google.maps.Marker({
                    position: location,
                    map: map
                });

                google.maps.event.addListener(marker, "click", function (e) {
                    var infoWindow = new google.maps.InfoWindow({
                        content: 'Latitude: ' + location.lat() + '<br />Longitude: ' + location.lng()
                    });
                    infoWindow.open(map, marker);
                });
            });
        };
    </script>
    <style type="text/css">
        .style1
        {
            color: #990000;
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <h2 align="center" class="style1">
            Create Mark in google Map in asp.net by C# code
        </h2>
    </div>
    <div id="dvMap" style="width: 100%; height: 600px">
    </div>
    </form>
</body>
</html>
 
Asp.net Show (add) Markers on Google Map
Asp.net Show (add) Markers 

Map Zooming by Click on Mark:


google.maps.event.addListener(marker,'click',function() 
{
  map.setZoom(9);
  map.setCenter(marker.getPosition());
  });

Other Asp.net Related Post and Example:












Sql Server Interview Qus:

Comments

Post a Comment