I built a front-end form that includes a Google Map where the user can specify his address. As the default lat/lng and zoom I specified a view of the whole of my country.
Now the idea is to have the map zoom in a little further to city-level when the user enters their address. But as is the marker is just put on the part of the country where that address is (i.e. still the whole country is displayed, no regional details).
I was wondering how to have it zoom in the same way it happens on Google Maps’ own website. My JavaScript is a bit weak and I haven’t gotten very far with customizing the maps myself…
Would be grateful for any advice.
Hi @dtx211
I think you can use the google_map_change JavaScript action and check if the location is changed or not. It should be something like this:
// change map zoom on map change
add_action('acf/input/admin_footer', 'my_acf_change_zoom');
function my_acf_change_zoom() {
?>
<script type="text/javascript">
(function($) {
// do this when the map is changed
acf.add_action('google_map_change', function( latlng, $map, $field ){
// check if the new location is different from the pre-defined location
if( latlng.lat() != -37.81411 ||
latlng.lng() != 144.96328 ){
// zoom the map if it's differrent
$map.setZoom(14);
}
});
})(jQuery);
</script>
<?php
}
Don’t forget to change the pre-defined location (-37.81411, 144.96328).
I hope this helps 🙂
