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 |
Map Zooming by Click on Mark:
google.maps.event.addListener(marker,'click',function()
{
map.setZoom(9);
map.setCenter(marker.getPosition());
});
map.setZoom(9);
map.setCenter(marker.getPosition());
});
Other Asp.net Related Post and Example:
Sql Server Interview Qus: |
Comments
Post a Comment