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

Adding Animated Markers to Google Maps V3 with JavaScript in Asp.net Website

Jan 18, 2013
Introduction:

Here I will explain how to add animated marker in Google maps api using JavaScript in asp.net website or Show animated marker in Google maps api in asp.net.

Description:

In previous article I explained clearly how to add Google map to website in asp.net, Add marker to Google map in asp.net website, Add multiple markers to Google map using JSON, jQuery Google currency converter example and many articles relating to jQuery, JavaScript, asp.net. Now I will explain how to add animated 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>Add Animated marker 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(13.053147716796578, 80.2501953125)
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,
animation:google.maps.Animation.BOUNCE,
title: "Chennai"
});
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 animated 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,
animation:google.maps.Animation.BOUNCE,
title: "Chennai"
});
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 RSS subscribe by email Subscribe by Email

4 comments :

Anonymous said...

i need All Chennai Areas in Google Map with Marker in Anna Nagar.pls Send me the script r89.ramu@gmail.com

Unknown said...

Dear sir, i need a map where i will be able to filter with check box list

Anonymous said...

Thank you Sir,the code works fine.
sir i wanted to add different coloured marker to different area.

Anonymous said...

Hi, How can I convert that code to a GIF image like you did?
Thanks!

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.