Google Maps Tips
There are a few things that I had to figure out the hard way to get my google maps working correctly. The Documentation on the Advanced Custom Fields website was ok, but it was missing a few things that I had to figure out for myself.
First, sometimes there is a weird bug that makes the controls on the left look all smashed and the close window x’s and other things. To fix this just add this css to your map.
.acf-map img{max-width: inherit;}/*This is necessary to make the controls and x’s, etc show up correctly.*/
Second, when you are on a mobile device and you are scrolling down you can get stuck zooming on a map if it spans the whole screen. You will have a hard time scrolling past the map from the top, or if you do, then getting back to the top. To fix this add this to your google maps js code.
var isDraggable = $(document).width() > 480 ? true : false; // If document (your website) is wider than 480px, isDraggable = true, else isDraggable = false
var args = {
zoom : 16,
center : new google.maps.LatLng(0, 0),
mapTypeId : google.maps.MapTypeId.ROADMAP ,
draggable: isDraggable,
scrollwheel: false, // Prevent users to start zooming the map when scrolling down the page
//… options options options
}
Another thing that took me a little while to figure out was how to add content to the infowindow when you click on the map marker. This is really easy. Any HTML you put inside the div with the class marker will show up when you click the marker.