The dancing bubble...

         "Why does this bubble not dance?" asked my friend's 6 year old sister referring to a marker she was seeing on the map! So I decided the this marker needs to be animated! So, I developed the following code which shows a marker that bounces on its position and can also be dragged anywhere on the map!

        The following is the code for the "dancing marker"...

<html>
<head>
<title>Google Maps JavaScript API v3 - Bouncing marker</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var marker;
var map;

function initialize()
{
    map = new google.maps.Map(document.getElementById("map"),
    {
        zoom: 5,
              mapTypeId: google.maps.MapTypeId.ROADMAP,
              center: new google.maps.LatLng(22.7964,79.5410)
    });

    marker = new google.maps.Marker(
    {
              map:map,
              draggable:true,
              animation: google.maps.Animation.DROP,
              position: new google.maps.LatLng(22.7964,79.5410)
        });
        google.maps.event.addListener(marker, 'click', markerBounce);
}

function markerBounce()
{
    if (marker.getAnimation() != null)
        marker.setAnimation(null);
    else
        marker.setAnimation(google.maps.Animation.BOUNCE);
}
</script>
</head>
<body onload="initialize()">
<div id="map" style="width: 500px; height: 400px;">map div</div>
</body>
</html>

         The dancing marker from the above code looks as seen in the image below!

The code to make the marker bounce and move is not at all very special. It's just an adjustment of the marker properties as you can see in the code! I have just changed the dragging property of the marker to true and added the animation property as well.

If you have any suggestion regarding the contents of the blog, please drop your comments here or feel free to drop me a mail!

Comments

Recommended for You

ES6 101 - For..of

Spatial Unlimited changes to The UI Dev After being hosted on blogger 😣 for the last 6 years 📆, this page has finally been moved to Github.io This means a few things for you, dear reader! You will be redirected to the new page shortly! ⏩ ⏩ ⏩ Once crapy HTML is now better looking Markdown ! 😍 😍 The entire blog is a Github repo ! 😍 😍 Spatial Unlimited is now The UI Dev 😍 😍

Drive along - Cool coding

This is something that will demonstrate to you the power of mapping! This is a Google Maps API v2 example, but just copy and paste the code in an html file and you will see something very cool! This will prove that mapping is real fun! Let's have a look at the code first. Copy this code in your html file. Don't worry about the length of the code and the post in general. Just execute the code and you will surely enjoy what you see! <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <title> Drive Along </title> <script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=ABQIAAAAu3HXU_hLdVPTFGqLed_FCxT2yXp_ZAY8_ufC3CFXhHIE1NvwkxQbblEPYBGNoRsuuSU9aBfSq4VAZA" type="text/javascript"> </script> <script src="http://econym.org.uk/gmap/epoly.js" type="text/javascript"> ...

CSS Text and Font

In this post today, we will take a look at some of the most interesting CSS text and font properties listed below. text-transform white-space word-break word-spacing word-wrap font-variant Text-transform property: Let's begin with the text-transform property. The filler text used in all the examples below has been taken from Andy Matthew's filler text generator which is a humorous replacement to the traditional boring lorem ipsum . The text-transform property will turn your text to uppercase, lowercase and also will capitalize the first character of every word. So now you don't need any javascript to do your bidding. This transformation will be done irrespective of the special characters preceding and following the text characters. The following example will make things much more clear and editable of course =) White-space property: The next property to explore is the white-space proper...

ES6 101 - Lexical Declarations - Const

Jquery Mobile Form - Search input

Input field of type search is newly introduced in HTML5 and is very well styled. The style is further enhanced when using the Jquery Mobile framework and we will see how this can be done in today's post. Jquery Mobile styles the search input type with capsule-corners and adds a 'x' icon to the right end, which clears the text in the search box. The seacrch input elements are available in 2 flavors/sizes - regular and mini. Adding a data attribute data-mini="true" to the input tag renders a smaller sized input element. Let's take a look at the code sample below to understand the working in a better way. In the code above, you will see 4 different implementations of the input search element. The first one is a regular input of type search with the label and the searchbox one below the other. The second implementation is exactly similar to the first implementation with the only difference of the added data attrib...

The UI Dev

Search This Blog