Animate Marker In Google Map Using Bootstrap In ASP.NET MVC - Part Three

This blog shows you how to animate the marker with the animation property In ASP.NET MVC.

Introduction

Before going through this blog, kindly go through.

http://www.c-sharpcorner.com/blogs/google-map-using-bootstrap-in-asp-net-mvc-part1
http://www.c-sharpcorner.com/blogs/google-map-using-bootstrap-in-asp-net-mvc-part2

Description

Animate the marker with the animation property In ASP.NET MVC.

Steps

Add a controller action method named Animate() in HomeController.cs of the same Application. 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace SatyaGoogleMapBootstrapMVC.Controllers
{
    public class HomeController : Controller
    {
        //
        // GET: /Home/

        public ActionResult Index()
        {
            return View();
        }
        public ActionResult Details()
        {
            return View();
        }
        public ActionResult Animate()
        {
            return View();
        }
    }
}

Create a View called Animate.cshtml.

@{
    ViewBag.Title = "Satyaprakash Animate Marker On Bhubaneswar";
}

<title>@ViewBag.Title</title>

<h2 style="background-color: Yellow;color: Blue; text-align: center; font-style: oblique">Satyaprakash's Animate Marker On Bhubaneswar Using MVC and BOOTSTRAP</h2>
<fieldset>
    <legend style="font-family: Arial Black; color: blue; font-size: large;">Check Animate Marker On Bhubaneswar</legend>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <div id="map" style="width:100%;height:500px"></div>
    <script>
        function myMap() {
            var mapCanvas = document.getElementById("map");
            var myCenter = new google.maps.LatLng(20.296100, 85.824500);
            var mapOptions = { center: myCenter, zoom: 14 };
            var map = new google.maps.Map(mapCanvas, mapOptions);
            var marker = new google.maps.Marker({
                position: myCenter,
                animation: google.maps.Animation.BOUNCE
            });
            marker.setMap(map);
        }
    </script>

    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkVZYQFe4YYva_g5ulymGDt9EBoVjjZJ8&callback=myMap"></script>

</fieldset>
<footer>
    <p style="background-color: Yellow; font-weight: bold; color:blue; text-align: center; font-style: oblique">© @DateTime.Now.ToLocalTime()</p> @*Add Date Time*@
</footer>

Here, I used one property, which will make the marker animated.

animation: google.maps.Animation.BOUNCE

There are four types of Google map Animate marker types, which are given below.

• BOUNCE
• DROP
• lo
• no

All other properties description are same, as earlier mentioned in the previous parts.

Output

 

Desktop View

 

URL is http://localhost:57237/Home/Animate

For BOUNCE

 

 

 

For DROP

 

For lo

 

 

For no

 

 

 

Mobile View

 

 

 

Summary

1. What is Animate marker In Google Map API.
2. How to implement it in ASP.NET MVC.