Google Maps – Passing Variables

• huwrowlands

• March 2, 2015 at 8:46 pm

Hi,

I’ve implemented the Google Maps using ACF Pro, and all is working well.
What I want to do though is pass variables for the Map Zoom Level and Map Type (Road, Satellite etc) so users can choose these options.

I can’t seem to pass the results from those 2x fields (which are stored in variables) into the jQuery script as they are saved as PHP variables.

What’s the best way to go about this?

Thanks

• huwrowlands

• March 4, 2015 at 12:32 am

Solved my issue.

I added data attributes to the marker HTML:
<div class="marker" data-type="<?php echo $map_display_setting; ?>" data-zoom="<?php echo $map_zoom_level; ?>" data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>"></div>

And then set global variables:

		var marker = $('.marker');
			var zoomLevel = marker.data('zoom');
			var mapType   = marker.data('type');

And then altered the code below:

		// vars
		var args = {
			zoom		  : zoomLevel,
			center		: new google.maps.LatLng(0, 0),
			mapTypeId	: google.maps.MapTypeId[mapType]
		};

and

		// only 1 marker?
		if( map.markers.length == 1 )
		{
			// set center of map
		    map.setCenter( bounds.getCenter() );
		    map.setZoom( zoomLevel );
		}