How To Make Googlemap Animated Polygon In Javascript

Updated date May 17, 2017

13.iiig
1

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

Introduction

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

Follow my Google Maps part ane- 5 blogs earlier you lot go through to part half dozen.

Description

A polygon supports the post-obit properties.

path - specifies several LatLng coordinates for the line.
strokeColor - specifies a hexadecimal color for the line.
strokeOpacity - specifies the opacity of the line.
strokeWeight - specifies the weight of the line'south stroke in pixels.
fillColor - specifies a hexadecimal color for the surface area within the enclosed region.
fillOpacity - specifies the opacity of the fill color.
editable - defines whether the line is editable by users.

Steps

Create a Controller class file.

using Arrangement;
using System.Collections.Generic;
using System.Linq;
using System.Spider web;
using Organisation.Spider web.Mvc;
namespace SatyaGoogleMapBootstrapMVC.Controllers
{
public course HomeController : Controller
{
public ActionResult Alphabetize()
{
render View();
}
public ActionResult Details()
{
render 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-marshal: eye; font-fashion: oblique" >Satyaprakash's Google Map Polygon Using MVC and BOOTSTRAP</h2>
<fieldset>
<fable way="font-family: Arial Black; color: blue; font-size: big;" >Check Surface area Occupied By iii Cities Using Google Map Polygon</fable>
<meta charset="utf-viii" >
<meta proper name="viewport" content= "width=device-width, initial-calibration=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%;tiptop:500px" ></div>
<script>
office myMap() {
var Bhubaneswar = new google.maps.LatLng(twenty.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:"Dark-green" ,
strokeOpacity: 0.8,
strokeWeight: two,
fillColor:"Yellowish" ,
fillOpacity: 0.4
});
var marker1 = new google.maps.Marker({
position: Bhubaneswar,
animation: google.maps.Animation.Bounce
});
var marker2 = new google.maps.Marker({
position: Hyderabad,
animation: google.maps.Animation.BOUNCE
});
var marker3 = new google.maps.Marker({
position: Bangalore,
blitheness: google.maps.Animation.BOUNCE
});
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: eye; font-way: oblique" >© @DateTime.Now.ToLocalTime()</p> @*Add Date Time*@
</footer>