Click on KML Layers
A sample showing how to generate a click event on a given lat,long coordinate.
HTML
<div id="map"></div>
<div id="trigger"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&v=3.27">
</script>
CSS
/* 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: 90%;
margin: 0;
padding: 0;
}
JavaScript
function initMap() {
const zoom = 5;
//point variable
let nashville = new google.maps.LatLng({
lat: 36.174465,
lng: -86.76796
});
//map obj
let map = new google.maps.Map(document.getElementById('map'), {
zoom: zoom,
center: nashville
});
var usSnowLayer = new google.maps.KmlLayer({
url: 'http://design.medeek.com/resources/snow/kml/US.kmz',
clickable: true,
suppressInfoWindows: false,
preserveViewport: true,
map: map
});
// Create the DIV to hold the control and call the CenterControl()
// constructor passing in this DIV.
var centerControlDiv = document.getElementById('trigger');
var centerControl = new CenterControl(centerControlDiv, map, nashville);
centerControlDiv.index = 1;
map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
}
// Simulates a click at the given coordinates (sets it to center, if it's not visible).
function simulateClick(map, latLng) {
// first make sure that the latLng is visible.
// If it's not, then set it to the center and wait for the map to become idle.
console.log("inside",latLng);
if (!map.getBounds().contains(latLng)) {
map.setCenter(latLng);
let l = map.addListener('idle', function() {
google.maps.event.removeListener(l);
simulateClick(map, latLng);
});
return;
}
// Only works on Zoom >= 3.
if (map.getZoom() < 3) {
map.setZoom(3);
let l = map.addListener('idle', function() {
google.maps.event.removeListener(l);
simulateClick(map, latLng);
});
return;
}
// Convert the lat, long coordinates to Pixel Coordinates
// See here for more info on the coordinate types:
// https://developers.google.com/maps/documentation/javascript/maptypes#MapCoordinates
const zoom = map.getZoom();
const proj = map.getProjection();
const boundsLL = map.getBounds();
const southWestMap = worldToPixel(proj.fromLatLngToPoint(boundsLL.getSouthWest()), zoom);
const pointMap =...