Question

140

Google Maps 3 API - Click on feature (from geojson) and check if it contains location(s)

rated 0 times [ 146] [ 6] / answers: 1 / hits: 7269 / 9 Years ago, fri, march 27, 2015, 12:00:00

I have loaded a geojson file successfully on my map. I am able to click each polygon to change stroke and access its properties. But I want to find out if certain points are within each multipolygon.

I have used google.maps.geometry.poly.containsLocation() for normal polygons. Is there either a way to extract the polygon from event.feature.getGeometry()... to use in containsLocation or another method to check for this?

map.data.loadGeoJson('inc-tracts.json');

var featureStyle = {

    strokeColor: '#000000',

    strokeOpacity: 0.5,

    strokeWeight: 3,

}

map.data.setStyle(featureStyle);

map.data.addListener('click', function(event) {

    console.log(event.feature.getProperty(CTNAME));

    // This is where I want to check if point(s) fall within it.

}

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

bryantc

Add To Favorites

Follow

Total Points: 455

Total Questions: 96

Total Answers: 110

Location: San Marino

Member since Thu, Jun 30, 2022

2 Years ago

bryantc questions

1 How to fix TypeError: Cannot read properties of undefined (reading 'useSystemColorMode')

Tue, Dec 7, 21, 00:00, 3 Years ago

1 NextJS / vercel - 504 Error 'FUNCTION_INVOCATION_TIMEOUT'

Fri, Aug 13, 21, 00:00, 3 Years ago

1 using react router with next.js

Tue, Mar 30, 21, 00:00, 3 Years ago

1 Notification system using socket.io

Fri, Jun 5, 20, 00:00, 4 Years ago

1 prisma2: how to fetch nested fields?

Wed, May 27, 20, 00:00, 4 Years ago

View All

answered 9 Years ago jocelyntrishar · Accepted Answer

A google.maps.data.Polygon is not a google.maps.Polygon. The google.maps.geometry.poly.containsLocation method, takes two arguements:





Methods                                         Return Value    Description

containsLocation(point:LatLng, polygon:Polygon) boolean         Computes whether the given point lies inside the specified polygon.

A google.maps.LatLng object and a google.maps.Polygon (not a google.maps.data.Polygon). You need to create a google.maps.Polygon from the data in the google.maps.data.Polygon to use that function.

working fiddle

proof of concept code snippet:

function initialize() {

  // Create a simple map.

  features = [];

  map = new google.maps.Map(document.getElementById('map-canvas'), {

    zoom: 4,

    center: {

      lat: -28,

      lng: 137.883

    }

  });

  var markers = [

    [31.713127, 35.206804],

    [31.712762, 35.22028],

    [31.706117, 35.210753],

    [31.717216, 35.210066],

    [31.701152, 35.188265],

    [31.704073, 35.19144]

  ];

  var gmarkers = [];

  var info = new google.maps.InfoWindow();

  for (var i = 0; i < markers.length; i++) {

    gmarkers.push(new google.maps.Marker({

      position: {

        lat: markers[i][0],

        lng: markers[i][1]

      },

      draggable: true,

      map: map

    }));

    google.maps.event.addListener(gmarkers[gmarkers.length - 1], 'click', function() {

      info.setContent(this.getPosition().toUrlValue(6));

      info.open(map, this);

    });

  }



  google.maps.event.addListener(map, 'click', function(e) {

    document.getElementById('info').innerHTML += e.latLng.toUrlValue(6) + <br>;

  })

  google.maps.event.addListener(map, 'click', function() {

    info.close();

  });

  // process the loaded GeoJSON data.

  var bounds = new google.maps.LatLngBounds();

  google.maps.event.addListener(map.data, 'addfeature', function(e) {

    if (e.feature.getGeometry().getType() === 'Polygon') {

      var polys = e.feature.getGeometry().getArray();

      for (var i = 0; i < polys.length; i++) {

        for (var j = 0; j < polys[i].getLength(); j++) {

          bounds.extend(polys[i].getAt(j));

        }

      }

      map.fitBounds(bounds);

    }

  });

  map.data.addGeoJson(data);

  map.data.addListener('click', function(event) {

    if (event.feature.getGeometry().getType() === 'Polygon') {

      var polyPath = event.feature.getGeometry().getAt(0).getArray();

      var poly = new google.maps.Polygon({

        paths: polyPath

      });

      for (var i = 0; i < gmarkers.length; i++) {

        if (google.maps.geometry.poly.containsLocation(gmarkers[i].getPosition(), poly)) {

          gmarkers[i].setIcon(http://maps.google.com/mapfiles/ms/icons/blue.png);

        } else {

          gmarkers[i].setIcon();

        }

      }

    };

  });

}



google.maps.event.addDomListener(window, 'load', initialize);

var data = {

  type: FeatureCollection,

  features: [{

    type: Feature,

    properties: {

      name: test,

      desc: test desc,

      inDailyProgram: true,

      color: red

    },

    geometry: {

      type: Polygon,

      coordinates: [

        [

          [

            35.188327,

            31.699929,

            0

          ],

          [

            35.187895,

            31.699669,

            0

          ],

          [

            35.187014,

            31.699729,

            0

          ],

          [

            35.186867,

            31.700016,

            0

          ],

          [

            35.186783,

            31.700395,

            0

          ],

          [

            35.186921,

            31.700787,

            0

          ],

          [

            35.187232,

            31.701291,

            0

          ],

          [

            35.18763,

            31.701844,

            0

          ],

          [

            35.187442,

            31.702328,

            0

          ],

          [

            35.18692,

            31.702779,

            0

          ],

          [

            35.187064,

            31.703654,

            0

          ],

          [

            35.187433,

            31.703794,

            0

          ],

          [

            35.188155,

            31.70344,

            0

          ],

          [

            35.188921,

            31.702917,

            0

          ],

          [

            35.189348,

            31.702887,

            0

          ],

          [

            35.189828,

            31.70302,

            0

          ],

          [

            35.190313,

            31.703443,

            0

          ],

          [

            35.190359,

            31.704104,

            0

          ],

          [

            35.190224,

            31.704348,

            0

          ],

          [

            35.189797,

            31.704585,

            0

          ],

          [

            35.189753,

            31.704948,

            0

          ],

          [

            35.189847,

            31.705107,

            0

          ],

          [

            35.190187,

            31.705015,

            0

          ],

          [

            35.190604,

            31.705041,

            0

          ],

          [

            35.190931,

            31.705171,

            0

          ],

          [

            35.191435,

            31.70526,

            0

          ],

          [

            35.191861,

            31.705231,

            0

          ],

          [

            35.192482,

            31.705008,

            0

          ],

          [

            35.192945,

            31.704893,

            0

          ],

          [

            35.193564,

            31.704449,

            0

          ],

          [

            35.192869,

            31.704004,

            0

          ],

          [

            35.192256,

            31.703737,

            0

          ],

          [

            35.191754,

            31.703371,

            0

          ],

          [

            35.191306,

            31.703001,

            0

          ],

          [

            35.190838,

            31.702632,

            0

          ],

          [

            35.190546,

            31.70221,

            0

          ],

          [

            35.190348,

            31.701739,

            0

          ],

          [

            35.190323,

            31.701589,

            0

          ],

          [

            35.189814,

            31.701624,

            0

          ],

          [

            35.189443,

            31.701456,

            0

          ],

          [

            35.189108,

            31.701217,

            0

          ],

          [

            35.188509,

            31.700359,

            0

          ],

          [

            35.188327,

            31.699929,

            0

          ]

        ]

      ]

    }

  }, {

    type: Feature,

    properties: {

      name: test,

      desc: test desc,

      inDailyProgram: true,

      color: red

    },

    geometry: {

      type: Polygon,

      coordinates: [

        [

          [

            35.209224,

            31.718497,

            0

          ],

          [

            35.209775,

            31.718459,

            0

          ],

          [

            35.210282,

            31.717788,

            0

          ],

          [

            35.210741,

            31.71723,

            0

          ],

          [

            35.21132,

            31.716803,

            0

          ],

          [

            35.211748,

            31.716193,

            0

          ],

          [

            35.212124,

            31.715632,

            0

          ],

          [

            35.212315,

            31.714798,

            0

          ],

          [

            35.21227,

            31.714137,

            0

          ],

          [

            35.212647,

            31.713599,

            0

          ],

          [

            35.21316,

            31.713412,

            0

          ],

          [

            35.214134,

            31.713095,

            0

          ],

          [

            35.215018,

            31.712675,

            0

          ],

          [

            35.215822,

            31.7119,

            0

          ],

          [

            35.21577,

            31.711156,

            0

          ],

          [

            35.215564,

            31.710175,

            0

          ],

          [

            35.215104,

            31.709128,

            0

          ],

          [

            35.21473,

            31.708518,

            0

          ],

          [

            35.214301,

            31.707911,

            0

          ],

          [

            35.214086,

            31.707207,

            0

          ],

          [

            35.213709,

            31.706154,

            0

          ],

          [

            35.213519,

            31.705807,

            0

          ],

          [

            35.212415,

            31.705441,

            0

          ],

          [

            35.211313,

            31.705103,

            0

          ],

          [

            35.210114,

            31.704964,

            0

          ],

          [

            35.20915,

            31.705031,

            0

          ],

          [

            35.208402,

            31.704612,

            0

          ],

          [

            35.207939,

            31.704119,

            0

          ],

          [

            35.207657,

            31.704636,

            0

          ],

          [

            35.207123,

            31.704922,

            0

          ],

          [

            35.206421,

            31.705164,

            0

          ],

          [

            35.205969,

            31.70529,

            0

          ],

          [

            35.205926,

            31.705613,

            0

          ],

          [

            35.205553,

            31.705808,

            0

          ],

          [

            35.205577,

            31.706157,

            0

          ],

          [

            35.205694,

            31.706459,

            0

          ],

          [

            35.205902,

            31.70686,

            0

          ],

          [

            35.206285,

            31.707193,

            0

          ],

          [

            35.206113,

            31.707375,

            0

          ],

          [

            35.206005,

            31.707544,

            0

          ],

          [

            35.206139,

            31.707746,

            0

          ],

          [

            35.206713,

            31.708194,

            0

          ],

          [

            35.207228,

            31.708428,

            0

          ],

          [

            35.207474,

            31.708798,

            0

          ],

          [

            35.207463,

            31.709435,

            0

          ],

          [

            35.207359,

            31.709878,

            0

          ],

          [

            35.207255,

            31.710418,

            0

          ],

          [

            35.207232,

            31.71089,

            0

          ],

          [

            35.20712,

            31.711257,

            0

          ],

          [

            35.206802,

            31.711473,

            0

          ],

          [

            35.206408,

            31.711645,

            0

          ],

          [

            35.206061,

            31.711753,

            0

          ],

          [

            35.205639,

            31.711857,

            0

          ],

          [

            35.205398,

            31.711766,

            0

          ],

          [

            35.205213,

            31.711698,

            0

          ],

          [

            35.205289,

            31.711992,

            0

          ],

          [

            35.205266,

            31.712464,

            0

          ],

          [

            35.205096,

            31.712808,

            0

          ],

          [

            35.204885,

            31.713348,

            0

          ],

          [

            35.204829,

            31.71414,

            0

          ],

          [

            35.204947,

            31.714644,

            0

          ],

          [

            35.205089,

            31.715104,

            0

          ],

          [

            35.205489,

            31.715687,

            0

          ],

          [

            35.205906,

            31.716113,

            0

          ],

          [

            35.206464,

            31.716586,

            0

          ],

          [

            35.20684,

            31.716421,

            0

          ],

          [

            35.207254,

            31.716005,

            0

          ],

          [

            35.207524,

            31.715517,

            0

          ],

          [

            35.207901,

            31.714965,

            0

          ],

          [

            35.207949,

            31.714464,

            0

          ],

          [

            35.208022,

            31.713919,

            0

          ],

          [

            35.20835,

            31.713855,

            0

          ],

          [

            35.208542,

            31.714229,

            0

          ],

          [

            35.208847,

            31.71465,

            0

          ],

          [

            35.209151,

            31.715044,

            0

          ],

          [

            35.20929,

            31.71545,

            0

          ],

          [

            35.209362,

            31.715694,

            0

          ],

          [

            35.209315,

            31.716214,

            0

          ],

          [

            35.209177,

            31.716619,

            0

          ],

          [

            35.209031,

            31.716906,

            0

          ],

          [

            35.208958,

            31.717132,

            0

          ],

          [

            35.208853,

            31.717333,

            0

          ],

          [

            35.208878,

            31.717691,

            0

          ],

          [

            35.209224,

            31.718497,

            0

          ]

        ]

      ]

    }

  }]

};

html,

body {

  height: 100%;

  margin: 0px;

  padding: 0px;

  width: 100%;

}

#map-canvas {

  height: 100%;

  width: 100%;

}

<script src=https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk></script>

<div id='info'></div>

<div id=map-canvas></div>