How to make polygon array map in google map, with the help of multiple latitude and longitude. in my previous articles, i have explained how to create google API, and I have made how to create multiple location point marker in google map API. here we are just going to see polygon map, polygon map is nothing just showing the marked area in google map. here I will explain to you how to find latitude and longitude in google map. let's see the polygon map code.
HOW TO FIND LATITUDE AND LONGITUDE IN GOOGLE MAP
Here just see the sample video to find latitude and longitude,
1. Open Google map https://www.google.co.in/maps/
2. Search the place where you need, Right click on the place, and the click on What's here. there you can see the latitude and longitude of the particular place.
Find some latitude and longitude and the use that in the below code, to make polygon map. Let's see the code.
HTML CODE
HTML CODE
<!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <title>Simple Polygon array map</title> <style> /* Always set the map height explicitly to define the size of the div * element that contains the map. */ #map { height: 100%; } /* Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; } </style> </head> <body> <div id="map"></div> <script> function initMap() { var map = new google.maps.Map(document.getElementById('map'), { zoom: 8, center: {lat: 13.340547, lng: 77.136114} }); // Define the LatLng coordinates for the polygon's path. var borderlatlng = [ {lat: 14.022132, lng: 75.571558}, /// shivamooga {lat: 14.681398, lng: 77.602789}, /// Anantapur {lat: 13.627854, lng: 79.420593}, /// Thirupati {lat: 12.116034, lng: 78.162132}, /// Dharampuri {lat: 11.986247, lng: 75.376120}, /// Dharamasala ]; // Construct the polygon. var polygonmap = new google.maps.Polygon({ paths: borderlatlng, strokeColor: '#ff83a1', strokeOpacity: 0.2, strokeWeight: 2, fillColor: '#ff83a1', fillOpacity: 0.35 }); polygonmap.setMap(map); } </script> <script async defer src="https://maps.googleapis.com/maps/api/js?key=APIKEY&callback=initMap"> </script> </body> </html>
Use you Google map Api key in the above code, if you don't know how to create google map Api, Refer this link. i have used map center location as bangalore latitude and longitude, and in polygonmap define colors and opacity other things then set it. In my next tutorial, i will show you how provide service only in that particular selected ploygon area with google autocomplete api.
I really like these types of posts which are written in simple writing so that everyone can understand it, and everyone can understand what message does author wants to convey. The style of your is very unique but easy to understand what you want to say in this discussion. Feel free to visit top custom essay writing service for any king of essay writing. Thanks a lot for sharing. reply
ReplyDelete