Google Maps - Polygon With Animated Marker Using Bootstrap In ASP.NET MVC - Part Six

Introduction

A polygon consists of a series of coordinates in an ordered sequence. However, polygons are designed to define place coordinates within a closed loop. Polygons are made of straight lines.

Follow my Google Maps part 1- 5 blogs before you go through to part 6.

Description

A polygon supports the following properties.

1. path - specifies several LatLng coordinates for the line.
2. strokeColor - specifies a hexadecimal color for the line.
3. strokeOpacity - specifies the opacity of the line.
4. strokeWeight - specifies the weight of the line's stroke in pixels.
5. fillColor - specifies a hexadecimal color for the area within the enclosed region.
6. fillOpacity - specifies the opacity of the fill color.
7. editable - defines whether the line is editable by users.

Steps

Create a Controller class file.

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();
        }
        public ActionResult Icon()
        {
            return View();
        }
    }
}

 Create a View file named "Icon.cshtml".

@{
    ViewBag.Title = "Satyaprakash Google Map Polygon";
}

<title>@ViewBag.Title</title>

<h2 style="background-color: Yellow;color: Blue; text-align: center; font-style: oblique">Satyaprakash's Google Map Polygon Using MVC and BOOTSTRAP</h2>
<fieldset>
    <legend style="font-family: Arial Black; color: blue; font-size: large;">Check Area Occupied By 3 Cities Using Google Map Polygon</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 Bhubaneswar = new google.maps.LatLng(20.296100, 85.824500);
            var Hyderabad = new google.maps.LatLng(17.3850, 78.4867);
            var Bangalore = new google.maps.LatLng(12.9716, 77.5946);

            var mapCanvas = document.getElementById("map");
            var mapOptions = { center: Hyderabad, zoom: 6 };
            var map = new google.maps.Map(mapCanvas, mapOptions);

            var flightPath = new google.maps.Polygon({
                path: [Bhubaneswar, Hyderabad, Bangalore],
                strokeColor: "Green",
                strokeOpacity: 0.8,
                strokeWeight: 2,
                fillColor: "Yellow",
                fillOpacity: 0.4
            });

            var marker1 = new google.maps.Marker({
                position: Bhubaneswar,
                animation: google.maps.Animation.BOUNCE //BOUNCE ,DROP , lo , no
            });
            var marker2 = new google.maps.Marker({
                position: Hyderabad,
                animation: google.maps.Animation.BOUNCE //BOUNCE ,DROP , lo , no
            });
            var marker3 = new google.maps.Marker({
                position: Bangalore,
                animation: google.maps.Animation.BOUNCE //BOUNCE ,DROP , lo , no
            });

            flightPath.setMap(map);
            marker1.setMap(map);
            marker2.setMap(map);
            marker3.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 have mentioned three cities with their proper longitude and latitude details.

var Bhubaneswar = new google.maps.LatLng(20.296100, 85.824500);
var Hyderabad = new google.maps.LatLng(17.3850, 78.4867);
var Bangalore = new google.maps.LatLng(12.9716, 77.5946);

Then, I mentioned the polygon border color and fill color followed by opacity.

var flightPath = new google.maps.Polygon({
                path: [Bhubaneswar, Hyderabad, Bangalore],
                strokeColor: "Green",
                strokeOpacity: 0.8,
                strokeWeight: 2,
                fillColor: "Yellow",
                fillOpacity: 0.4
            });

Finally, I put the animated marker for 3 different cities with polygon.

var marker1 = new google.maps.Marker({
                position: Bhubaneswar,
                animation: google.maps.Animation.BOUNCE //BOUNCE ,DROP , lo , no
            });
            var marker2 = new google.maps.Marker({
                position: Hyderabad,
                animation: google.maps.Animation.BOUNCE //BOUNCE ,DROP , lo , no
            });
            var marker3 = new google.maps.Marker({
                position: Bangalore,
                animation: google.maps.Animation.BOUNCE //BOUNCE ,DROP , lo , no
            });

OUTPUT

Desktop View (with Satelite and Map View)

 

 

 

Mobile View (with Satelite and Map View)

 

 

 

 

 

 

 

 

 

Summary

 

In this blog, we learned the following.  

1. What is Google Maps Polygon.
2. How to implement it in MVC and Bootstrap.
3. Purpose behind Google Maps Polygon.
4. Using animated marker with Google Maps Polygon.