Reply To: Multiple ACF google map on one page inside accordion

• debendra

• July 12, 2016 at 1:55 pm

Hi James,
My friend helped me out in this, removed all ACF map code and put this one, and it worked like a charm.

<script>
function createMap(id){
	var Element = $("#" + id);
	if (Element.find(".marker").length != 1){
		return;
	}
	var latlng = new google.maps.LatLng(Element.find(".marker").data("lat"), Element.find(".marker").data("lng"));
	var myOptions = {
			zoom: 16,
			center: latlng,
			mapTypeId: google.maps.MapTypeId.ROADMAP,
			disableDefaultUI: true,
			mapTypeControl: false,
			zoomControl: true,
			scrollwheel: false,
			zoomControlOptions: {
					style: google.maps.ZoomControlStyle.SMALL
			}
	};

	var map = new google.maps.Map(Element[0], myOptions);
	console.log("Creating map at " + Element.attr('id'));

	var marker = new google.maps.Marker({
			icon: "<?php bloginfo('template_url'); ?>/img/custom_marker.png",
			position: latlng,
			map: map
	});
	return {map: map, marker: marker};
}

var $ = jQuery;
	$('.panel-collapse.collapse').parent().find(".panel-title a").click(function(){
		//console.log($(this).parent().parent().parent().find(".acf-map").attr('id'));
		var result = createMap($(this).parent().parent().parent().find(".acf-map").attr('id'));
		if (result != null){
			google.maps.event.addListenerOnce(result.map, 'idle', function(){
				google.maps.event.trigger(result.map, 'resize');
				result.map.setCenter(result.marker.getPosition());
			});
		}
	});

	//Run create map on the first map - because it is already visible
	createMap($(".acf-map").attr("id"));
</script>