V24s

"Get Updates : Subscribe to our e-mail newsletter to receive updates........" "Good Luck frnds" Admission 2019 Application Form 2019 Colleges Entrance Exam 2019 Results 2019 Notification 2019 University Educational Jobs 2019 Government Jobs 2019

Search This Blog v24s guys

03 April, 2013

Integrate Google Map in Asp.net Web Application | Show Google Map in Website

Introduction:

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 toJavaScript, 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:

Popular Posts

Recent Posts

Google Analytics