In this article, I have explained how to use goole map in Asp.Net. In this
article , you will learn how to mark/show your company or home on google map.
Design Page:-
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled
Page</title>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src = "https://maps.googleapis.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
window.onload =function initialize() {
var mapOptions
= {
center: new google.maps.LatLng(12.917354, 77.622064),
zoom: 10,
mapTypeId:
google.maps.MapTypeId.ROADMAP
// marker:true
};
var infoWindow
= new google.maps.InfoWindow();
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
var myLatlng =
new google.maps.LatLng(12.917354, 77.622064);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: "Wipro Madiwala "
});
(function(marker,
data) {
// Attaching a
click event to the current marker
google.maps.event.addListener(marker,
"click", function(e)
{
infoWindow.setContent(data.description);
infoWindow.open(map,
marker);
});
})(marker, data);
}
}
</script>
</head>
<body onload="initialize()">
<form id="form1"
runat="server">
<input id="start"
type="text"
/>
<input id="Text1"
type="text"
/>
<input type="submit" onclick="calcRoute();">
<div id="map_canvas"
style="width: 900px; height: 800px"></div>
<%--onload="initialize()"--%>
</form>
</body>
</html>
In this coding , I have given latitude and longitude value for Wipro Bangalore.
You can give your lat and lng value. You can also take the value from database.
In next article I will show you how to take value from database and show on
map.
No comments:
Post a Comment
Note: only a member of this blog may post a comment.