How to make polygon array map using google map api | 2my4edge

06 April 2017

How to make polygon array map using google map api

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.

google map polygon map array

LIVE DEMO                      DOWNLOAD


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
<!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.

No comments:

Post a Comment

^