Javascript - Trigger Click on Page Load

Question

I've made a website with the Google Maps API. If users click in a polygon a message appears. It works on click, so the user has to click in or outside the Polygon area, but I would like to make it on page load, based on the users current position.

Is it possible to trigger the function below on page load?

google.maps.event.addListener(map, 'click', function (event) {
        if (boundaryPolygon!=null && boundaryPolygon.Contains(event.latLng)) {
            document.getElementById('result').innerHTML = 'You live in this area.';
        } else {
            //alert(event.latLng + " Du bist ein Ossi!");
            document.getElementById('result').innerHTML = 'You live outside this area.';
        }

    });
}

Can't you move all that code into a different function and call the function from that listener and an on load event? — Kieran Quinn, Jun 30 '16 at 08:14
If I do that, the whole script doesn't work anymore. It needs the click to work. The click on the Google Map passes the position to the script. — Matthijs, Jun 30 '16 at 08:36
you can just put your whole `click` function into a function and name it something like `function showArea(event) { // if ... else ... }`. then you add the event listener (`addListener(map, 'click', showArea(event));`) as well as run the `showArea()` function on the map ready event (I think the maps api has some event when the map is loaded) — Simon Hänisch, Jun 30 '16 at 08:56
Try 'google.maps.event.addEventListener("load", map, function(event)){...' — andreini, Jun 30 '16 at 09:00
@Niandrei: I've tried this. it doesn't work.Then the whole script doesn't work anymore. — Matthijs, Jun 30 '16 at 09:21
Try this: http://stackoverflow.com/questions/2705583/how-to-simulate-a-click-with-javascript — Kieran Quinn, Jun 30 '16 at 10:38

score 0 · Answer 1 · answered Jun 30 '16 at 14:35

You can trigger a click event on the map like this (where the latLng property is the location of the click):

google.maps.event.trigger(map, 'click', {
  latLng: new google.maps.LatLng(24.886, -70.268)
});

proof of concept fiddle

code snippet:

// polygon example from: https://developers.google.com/maps/documentation/javascript/examples/polygon-simple
// This example creates a simple polygon representing the Bermuda Triangle.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 5,
    center: {
      lat: 24.886,
      lng: -70.268
    },
    mapTypeId: google.maps.MapTypeId.TERRAIN
  });

  // Define the LatLng coordinates for the polygon's path.
  var triangleCoords = [{
    lat: 25.774,
    lng: -80.190
  }, {
    lat: 18.466,
    lng: -66.118
  }, {
    lat: 32.321,
    lng: -64.757
  }, {
    lat: 25.774,
    lng: -80.190
  }];

  // Construct the polygon.
  var boundaryPolygon = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35,
    clickable: false
  });
  boundaryPolygon.setMap(map);
  google.maps.event.addListener(map, 'click', function(event) {
    if (boundaryPolygon != null && google.maps.geometry.poly.containsLocation(event.latLng, boundaryPolygon)) {
      document.getElementById('result').innerHTML = 'You live in this area.';
    } else {
      document.getElementById('result').innerHTML = 'You live outside this area.';
    }
  });
  google.maps.event.trigger(map, 'click', {
    latLng: new google.maps.LatLng(24.886, -70.268)
  });
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#map {
  height: 100%;
}

<div id="result"></div>
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?libraries=geometry&callback=initMap">
</script>

Javascript - Trigger Click on Page Load

1 Answers1