Here
I will explain how to integrate Google map using JavaScript in asp.net web application or show Google map in asp.net web application or google
maps api v3 examples in asp.net.
Description:
In
previous articles I explained Restrict
user to enter only numeric characters in textbox, watermark
text for textbox using JavaScript, Redirect
to another page after some time delay and many articles relating to JavaScript, asp.net. Now I will explain how
to integrate Google map in asp.net web
application or google maps api v3 examples in asp.net.
Before
integrate Google map in website first we need to get google api key for that please
check below url
Once
you got the key write the following code in your aspx or html page and replace key value with your key like as
shown below
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Show or Integrate Google Maps in asp.net webapplication</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?key=AIzaSyC6v5-2uaq_wusHDktM9ILcqIrlPtnZgEk&sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var myLatlng= new
google.maps.LatLng(-34.397, 150.644)
var mapOptions = {
center: myLatlng,
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP,
marker:true
};
var map = new
google.maps.Map(document.getElementById("map_canvas"),mapOptions);
}
</script>
</head>
<body onload="initialize()">
<form id="form1"
runat="server">
<div id="map_canvas"
style="width: 500px; height: 300px"></div>
</form>
</body>
</html>
|
If you observe above code in header
section I written code like
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=Your_API_Key&sensor=SET_TRUE_OR_FALSE">
|
Here
you need to set key value as your
api key and
sensor parameter of the
URL must be included, it indicates whether this application uses a sensor (such
as a GPS locator) to determine the user's location for that reason you must set this value to either true or false explicitly
Demo
 |
No comments:
Post a Comment