Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

JavaScript Integrate Google Map in Website | Show Google Map in Website

Jan 16, 2013
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 RSS subscribe by email Subscribe by Email

21 comments :

Saheem said...

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

rams said...

Thank u sir....very nice

Anonymous said...

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..

Unknown said...

Sir,I am not getting output but i am not getting any issues with it...can u plzz help???

Anonymous said...
This comment has been removed by a blog administrator.
Anonymous said...

@anonymous: disable right click in the site..

Unknown said...

In this code,what is the use of (-34.397, 150.644)?
please reply me!!!

Fahad Momin said...

Kachhadiya Bhavesh

these are latitude and longitude of location.

Anonymous said...

Hello i use ur demo but i can't see output but asp.net IDM shows nothing return error.
Help

Sauru said...

Hi sir
Its working Fine but how to show the particulat location...???

Unknown said...

nice one thanx sir

Unknown said...

Thanku Sir really u r Mind blowing
Sir how to show particular location

Unknown said...

Very good article.. i would like to know how to show particular location..

Ranjithprasad said...

How to create and display a custom Street View panorama using Maps Javascript API v3

Unknown said...

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..

Suresh Dasari said...

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

Suresh Dasari said...

@vidhya krishnan....
The code whatever i have given working fine only. Please check your code.

Pankaj said...

very good job

Anonymous said...

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.

Mossad@1962 said...

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

Anonymous said...

nice

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.