I'm displaying a Google Map using the Google Maps API in a FileMaker Web Viewer (using FileMaker Pro v16). On macOS High Sierra everything works fine, but on another Mac running Sierra or El Capitan the zoom buttons (the + and - buttons that appear in the bottom right corner) are not responding when you click them with the mouse.
If you use the mouse to zoom by swiping it works fine. If I save the html from the Web Viewer to a .html file and open in Safari it works fine, but for some reason the zoom buttons just won't respond in the Web Viewer on these systems. I'm testing with the basic sample from the Maps API docs like this (I'm adding my API Key but have removed from the sample code):
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<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>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap"
async defer></script>
</body>
</html>I'm not getting anything in the Console so at this point I'm stumped as to why the mouse clicks are not working when clicking the zoom in/out buttons on the map.
I've managed to resolve this issue by specifying the previous version of the API, e.g http://maps.google.com/maps/api/js?v=3.33&key=xxxxxxx