On resave, field data is cleared

[olivianicholls]

I have a custom post type that uses an ACF MapMore field that I'm experiencing issues with. When a post has an ACF MapMore field with a value already set, this value is cleared/removed upon resave. After saving I have to go back and reinput the location, which can be quite time consuming if it's using a polygon.

[rozklad]

Fixed working version can be downloaded from here: https://github.com/bitterendio/acf-field-type-mapmore/releases/tag/0.3.1

[olivianicholls]

This fix created a new problem, I now get a console error after saving post, and the map will no longer load in.

[olivianicholls]

So removing the json_encode from the hidden input in acf-mapmore-v5.php seems to have fixed the issue. Not sure if this would have a knockon effect on anything else but thought I'd mention!

[rozklad]

@olivianicholls thank you very much for your input, i will hopefully get to test your solution and fix it on this repo as well

[ezramod]

Hy, i try to remove json_encode from hidden input, but i have same issue, and in frontend no loading any polygon :( who know how to fixit ?

~ Fixed with last version

[ezramod]

For frontend i do in thie mode:

$perimetru_cvatral = get_field('perimetru_cvatral');
<?php if(!EMPTY($perimetru_cvatral)) { ?>
					<div class="card overflow-hidden mb-4">
						<div class="acf-map perimetru_cvatral m-0">
<?php
switch ( $perimetru_cvatral['type'] ) {
	case 'rectangle': 
	?>
	<script>	
      	new google.maps.Rectangle({
      		bounds:     <?php echo $perimetru_cvatral['bounds'] ?>,
      		map:        map
      	});
	</script>
	<?php
	break;

  	case 'polyline':
	?>
	<script>	
      	new google.maps.Polyline({
      		path:       <?php echo $perimetru_cvatral['path'] ?>],
      		map:        map,
      	});
  	</script>
  	<?php
  	break;

  	case 'polygon':
	?>
	<script>	
      	new google.maps.Polyligon({
      		path:       <?php echo $perimetru_cvatral['polygon'] ?>],
      		map:        map
      	});
  	</script>
  	<?php
  	break;

  	case 'circle':
	?>
	<script>	
      	new google.maps.Circle({
      		center:     {lat: <?php echo $perimetru_cvatral['lat'] ?>], lng: <?php echo $perimetru_cvatral['lng'] ?>},
      		radius:     <?php echo $perimetru_cvatral['radius'] ?>,
      		map:        map
      	});
  	</script>
  	<?php
  	break;

  	case 'marker':
	?>
	<script>	
      	new google.maps.Marker({
      		position:   {lat: <?php echo $perimetru_cvatral['lat'] ?>], lng: <?php echo $perimetru_cvatral['lng'] ?>},
      		map:        map,
      		animation:  google.maps.Animation.DROP
      	});
  	</script>
  	<?php
  	break;

}
?>
						</div>
					</div>
				<?php } ?>

But maps not show, see screenshot :

[rozklad]

@ezramod
I've fixed some issues in the plugin's code and also changed the API to get values from the field. Please update your plugin to current status of this repository's master branch.

Based on that and your code, it could work something like this:

<?php

// Get current map key
$key = '';
$keys = acf_get_setting('mapmore_google_api_key');
if (isset($keys[0])) {
    $key = $keys[0];
}

if (!empty($perimetru_cvatral)) { ?>
<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?v=weekly&key=<?php echo $key; ?>&libraries=places,drawing"></script>
<div id="map" style="height: 400px"></div>

<script type="text/javascript">
var map = new google.maps.Map(document.getElementById('map'));
</script>

<div class="mb-4 overflow-hidden card">
    <div class="m-0 acf-map perimetru_cvatral">
<?php switch ($perimetru_cvatral['type']) { case 'rectangle': ?>
    <script>
        new google.maps.Rectangle({
            bounds:     <?php echo json_encode($perimetru_cvatral['bounds']); ?>,
            map:        map
        });
    </script>
    <?php break;case 'polyline': ?>
    <script>
        new google.maps.Polyline({
            path:       <?php echo json_encode($perimetru_cvatral['path']); ?>],
            map:        map,
        });
    </script>
    <?php break;case 'polygon': ?>
    <script>
        new google.maps.Polygon({
            path:       <?php echo json_encode($perimetru_cvatral['path']); ?>,
            map:        map
        });
    </script>
    <?php break;case 'circle': ?>
    <script>
        new google.maps.Circle({
            center:     {lat: <?php echo $perimetru_cvatral['lat']; ?>], lng: <?php echo $perimetru_cvatral['lng']; ?>},
            radius:     <?php echo $perimetru_cvatral['radius']; ?>,
            map:        map
        });
    </script>
    <?php break;case 'marker': ?>
    <script>
        new google.maps.Marker({
            position:   {lat: <?php echo $perimetru_cvatral['lat']; ?>], lng: <?php echo $perimetru_cvatral['lng']; ?>},
            map:        map,
            animation:  google.maps.Animation.DROP
        });
    </script>
    <?php break;} ?>
    </div>
</div>
<?php }

[rozklad]

@ezramod Sorry for inconvenience. The new update relied on composer autoloads. Please update the plugin once more, the issue is fixed now.

[ezramod]

fix bug, with plugin but map not show on front end i try to understnad where is bug and i do this:

<script>
    function ezra_property_map(){
      var myLatlng=new google.maps.LatLng( <?php echo $perimetru_cvatral['center_lat']; ?>, <?php echo $perimetru_cvatral['center_lng']; ?>;
      var myOptions={
        zoom:12,
        center:myLatlng,
        mapTypeId:"roadmap"
      };
      var map=new google.maps.Map(document.getElementById("ezra_property_map_id"),myOptions);
      /*your shape build with seochecker web tool*/
      const shape_0 = new google.maps.Polygon({strokeColor:'#0062cc',strokeOpacity:0.5,strokeWeight:1,fillColor:'#133c55',fillOpacity:0.5,path:<?php echo json_encode($perimetru_cvatral['path']); ?>});
      shape_0.setMap(map);
    }
  </script>
<script src="https://maps.googleapis.com/maps/api/js?key=<?php echo $key; ?>&callback=ezra_property_map" async defer></script>

and value for center_lat and center_lng not work on frontend user.

can u help me? i try to create polygon

[ezramod]

Fot a good work i do in this mode:

// Get current map key
$key = '';
$keys = acf_get_setting('mapmore_google_api_key');
if (isset($keys[0])) {
    $key = $keys[0];
}

if (!empty($perimetru_cvatral)) { ?>
<div id="ezra_property_map_id" class="card overflow-hidden mb-4" style="height:400px;"></div>	
<script>
	function ezra_property_map(){
		//var myLatlng=new google.maps.LatLng(44.4570715,26.0923607);
		var myOptions={
			zoom:15,
			//center:myLatlng,
			mapTypeId:"roadmap"
		};
		var map=new google.maps.Map(document.getElementById("ezra_property_map_id"),myOptions);		
		/*your shape build with seochecker web tool*/
		const shape_0 = new google.maps.Polygon({
			strokeColor:'#FC2323',
			strokeOpacity:1,
			strokeWeight:2,
			fillColor:'#FC2323',
			fillOpacity:0.5,
			path:<?php echo json_encode($perimetru_cvatral['path']); ?>
		});
		
		shape_0.setMap(map);
		
		const polyCoords = <?php echo json_encode($perimetru_cvatral['path']); ?>;
		
		var bounds = new google.maps.LatLngBounds();
		polyCoords.forEach(function(coord, index)
		{
			bounds.extend(coord);
		});
		//Note: "map" object already set and initialized elsewhere but not shown in code snippet to reduce verbosity 
		map.setCenter(bounds.getCenter());
    }
  </script>
<script src="https://maps.googleapis.com/maps/api/js?key=<?php echo $key; ?>&callback=ezra_property_map" async defer></script>

but maps selection is delete if update post without click on maps, if you do change on map and update post, settings is not deleted.