Asp.net programming we consider all important topic for knowledge about controls,web Services, JSON, Ajax, database, and interview related Question. In this Asp.net and sql server tutorial blog we give many examples of jquery as like How Play YouTube Video in Your Asp.net Website by URL, How to Play YouTube Videos in Asp.net by using Jquery , Jquery Change div background on mouseover in asp.net , JQuery UI Datepicker (Calendar) etc.

Friday, October 17, 2014

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.

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() 

No comments:

Post a Comment