Introduction:
Here
I will explain how to add marker in Google maps
api using JavaScript in asp.net website or Show
marker in Google maps
api in JavaScript.
Description:
In
previous article I explained clearly how to add google map to website in asp.net, jQuery image slideshow in asp.net, Sitemap navigation control example in asp.net and many
articles relating to jQuery,
JavaScript, asp.net. Now I will explain how
to add marker in Google maps
api
in asp.net website.
Before
add marker to 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 like as
shown below
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Show or Add markers to Google Maps in asp.net website</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=true">
</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);
var marker = new
google.maps.Marker({
position: myLatlng,
map: map,
title: "Your
Location Address!"
});
marker.setMap(map);
}
</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.
To add marker to google
map we need to use setMap() method
for that we need to write the code like as show below
var marker = new
google.maps.Marker({
position: myLatlng,
map: map,
title: " Your
Location Address!"
});
marker.setMap(map);
|
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
|
|||
1 comments :
how can I change the address shown on the Map , inserting a new address in the setMap() method does not seem to work
Note: Only a member of this blog may post a comment.