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.
  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. using System.Web.Mvc;
  7. namespace SatyaGoogleMapBootstrapMVC.Controllers
  8. {
  9. public class HomeController : Controller
  10. {
  11. //
  12. // GET: /Home/
  14. public ActionResult Index()
  15. {
  16. return View();
  17. }
  18. public ActionResult Details()
  19. {
  20. return View();
  21. }
  22. public ActionResult Animate()
  23. {
  24. return View();
  25. }
  26. }
  27. }
Create a View called Animate.cshtml.
  1. @{
  2. ViewBag.Title = "Satyaprakash Animate Marker On Bhubaneswar";
  3. }
  5. <title>@ViewBag.Title</title>
  7. <h2 style="background-color: Yellow;color: Blue; text-align: center; font-style: oblique">Satyaprakash's Animate Marker On Bhubaneswar Using MVC and BOOTSTRAP</h2>
  8. <fieldset>
  9. <legend style="font-family: Arial Black; color: blue; font-size: large;">Check Animate Marker On Bhubaneswar</legend>
  10. <meta charset="utf-8">
  11. <meta name="viewport" content="width=device-width, initial-scale=1">
  12. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  13. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  14. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  16. <div id="map" style="width:100%;height:500px"></div>
  17. <script>
  18. function myMap() {
  19. var mapCanvas = document.getElementById("map");
  20. var myCenter = new google.maps.LatLng(20.296100, 85.824500);
  21. var mapOptions = { center: myCenter, zoom: 14 };
  22. var map = new google.maps.Map(mapCanvas, mapOptions);
  23. var marker = new google.maps.Marker({
  24. position: myCenter,
  25. animation: google.maps.Animation.BOUNCE
  26. });
  27. marker.setMap(map);
  28. }
  29. </script>
  31. <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkVZYQFe4YYva_g5ulymGDt9EBoVjjZJ8&callback=myMap"></script>
  33. </fieldset>
  34. <footer>
  35. <p style="background-color: Yellow; font-weight: bold; color:blue; text-align: center; font-style: oblique">© @DateTime.Now.ToLocalTime()</p> @*Add Date Time*@
  36. </footer>
Here, I used one property, which will make the marker animated.
  1. 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.