Mark a area in Google Maps

In this example below you will see how to do a Mark a area in Google Maps with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by FuckingLunatic, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright FuckingLunatic ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Mark a area in Google Maps</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div id="coisa"></div>


<script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCBPDTM5YAwWowtsIAye5mS9b2ey3vfPc4&signed_in=true&callback=initMap">
    </script>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/FuckingLunatic/mark-a-area-in-google-maps-WweZyw */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#coisa {
  height: 100%;
}

/*Downloaded from https://www.codeseek.co/FuckingLunatic/mark-a-area-in-google-maps-WweZyw */
var fran; 
function initMap() {
   fran = new google.maps.Map(document.getElementById('coisa'), {
     zoom: 18,
     center: {
       lat: -23.49985,
       lng: -46.62405
     },
     mapTypeId: google.maps.MapTypeId.TERRAIN
   });

   // Define the LatLng coordinates for the polygon's path.
   var area = [{lng: -46.6295815, lat: -23.518427199999998},
{lng: -46.62606240000001, lat: -23.5189781},
{lng: -46.6209126, lat: -23.5181911},
{lng: -46.61722180000001, lat: -23.5185846},
{lng: -46.611042, lat: -23.5227557},
{lng: -46.60795209999999, lat: -23.5222835},
{lng: -46.60220150000001, lat: -23.5225196},
{lng: -46.5969658, lat: -23.526454500000003},
{lng: -46.5917301, lat: -23.5281071},
{lng: -46.5889835, lat: -23.5271627},
{lng: -46.5710449, lat: -23.5073299},
{lng: -46.5723324, lat: -23.505519600000003},
{lng: -46.57070159999999, lat: -23.5012693},
{lng: -46.57387730000001, lat: -23.498356899999997},
{lng: -46.5755939, lat: -23.4963104},
{lng: -46.5757656, lat: -23.495050999999997},
{lng: -46.5742207, lat: -23.4929256},
{lng: -46.5764523, lat: -23.4911939},
{lng: -46.5844345, lat: -23.483873},
{lng: -46.594305000000006, lat: -23.480960300000003},
{lng: -46.5992832, lat: -23.4815113},
{lng: -46.599883999999996, lat: -23.4806454},
{lng: -46.6020298, lat: -23.4819837},
{lng: -46.6077805, lat: -23.4797007},
{lng: -46.6112137, lat: -23.4766304},
{lng: -46.6143036, lat: -23.473323899999997},
{lng: -46.617651, lat: -23.4719068},
{lng: -46.61885259999999, lat: -23.4741112},
{lng: -46.6296673, lat: -23.4708833},
{lng: -46.6302681, lat: -23.4739537},
{lng: -46.6318989, lat: -23.476473},
{lng: -46.6327572, lat: -23.4786773},
{lng: -46.63198469999999, lat: -23.4827709},
{lng: -46.6359329, lat: -23.483164500000004},
{lng: -46.63764950000001, lat: -23.485132500000002},
{lng: -46.6400528, lat: -23.486549499999995},
{lng: -46.645460099999994, lat: -23.4868644},
{lng: -46.6478634, lat: -23.488202600000005},
{lng: -46.6542149, lat: -23.488911099999996},
{lng: -46.65601730000001, lat: -23.491508800000002},
{lng: -46.6621113, lat: -23.496231699999996},
{lng: -46.66743280000001, lat: -23.5034732},
{lng: -46.6704369, lat: -23.5069364},
{lng: -46.6711235, lat: -23.5135477},
{lng: -46.6295815, lat: -23.518427199999998}];

   // Construct the polygon.
   var marca = new google.maps.Polygon({
     paths: area,
     strokeColor: '#FF0000',
     strokeOpacity: 0.8,
     strokeWeight: 2,
     fillColor: '#FF0000',
     fillOpacity: 0.3
   });
   marca.setMap(fran);
 }

Comments