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 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
 |
|
If you enjoyed this post, please support the blog below. It's FREE! Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email. |
|||
Subscribe by RSS
Subscribe by Email
|
|||
21 comments :
Thankyou. Good job. I lIke to integrate the same for the mobile. I mean mobile browser. Is there any chnage in the code for making it mobile compatable. Pls my email saheem.pn@gmail.com
Thank u sir....very nice
boss its great you have protected the image with copy scape,we are unable to copy the image but able to save it tell me the process in order to stop both..
Sir,I am not getting output but i am not getting any issues with it...can u plzz help???
@anonymous: disable right click in the site..
In this code,what is the use of (-34.397, 150.644)?
please reply me!!!
Kachhadiya Bhavesh
these are latitude and longitude of location.
Hello i use ur demo but i can't see output but asp.net IDM shows nothing return error.
Help
Hi sir
Its working Fine but how to show the particulat location...???
nice one thanx sir
Thanku Sir really u r Mind blowing
Sir how to show particular location
Very good article.. i would like to know how to show particular location..
How to create and display a custom Street View panorama using Maps Javascript API v3
Hello! Your code cannot be executed properly. But it does not throw any exception. We cannot view the Google map. Actually it shows only the empty web page... Please change the code that to be useful..
To show particular location i written lot of articles relating to it please check this link
http://www.aspdotnet-suresh.com/search/label/Google%20MAPS
@vidhya krishnan....
The code whatever i have given working fine only. Please check your code.
very good job
Hello sir,
I'm kohila.
It is really awesome one.
It work as very fine.
Your each and every code run successfully.
I have implement your code at many place in my project.
Thank you sir.
vidhya krishnan you totally wrong.
I think you did n't got your API Key.
I got my API key and it works fine.
hi it works better but i want some extra functionality in it , i want to show my current location on google map and locations around me within 1,2,3 km that should i choose from drop dwon
nice
Note: Only a member of this blog may post a comment.