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

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

    function createMap(id){
    	var Element = $("#" + id);
    	if (Element.find(".marker").length != 1){
    	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(){
    		var result = createMap($(this).parent().parent().parent().find(".acf-map").attr('id'));
    		if (result != null){
    			google.maps.event.addListenerOnce(, 'idle', function(){
    				google.maps.event.trigger(, 'resize');;
    	//Run create map on the first map - because it is already visible