ACF Map with custom styles field

So I had a look at your site and found the json map styles in your div #map-styles.

However your json is not quite valid. Not sure where you copied the style source from or wether acf is manipulating the output.

I cleaned up your style json so it is valid, see validated version here.

So with regards to integrating it into your maps.js, the option style doesn’t exist, you need to modify mapTypeControlOptions to get your style registered as a mapTypeId

See google mapTypeControlOptions docs here.

Here is what I added to your current script to get it working. Note this wont work unless you make sure your json is valid from your acf field.

// map args
var mapArgs = {
  zoom: $el.data("zoom") || 16,
  mapTypeControlOptions: {
    mapTypeIds: [
      'custom_map_style',
      google.maps.MapTypeId.ROADMAP,
      google.maps.MapTypeId.SATELLITE
    ],
    style: google.maps.MapTypeControlStyle.HORIZONTAL
  }
};

// set our map
var map = new google.maps.Map($el[0], mapArgs);

// get our json from #map-sytles div
var customStyle = JSON.parse($('#map-styles').text());

// create the custom styled map type object
var customStyleMap = new google.maps.StyledMapType(customStyle, {
  name: 'Custom Style'
});

// set the custom styled map type against the map
map.mapTypes.set('custom_map_style', customStyleMap);
map.setMapTypeId('custom_map_style');

You will notice that i’ve added your custom style map as another option in mapTypeIds.

You can remove the default google.maps.MapTypeId.ROADMAP or google.maps.MapTypeId.SATELLITE or both… from mapTypeIds. Always nice to keep the satellite option in my opinion.

Here is a working demo on jsfiddle using your code from your site with the above tweeks.

https://jsfiddle.net/joshmoto/qcL7v9p6/

What would be cleaner is to output the json into a data attribute rather than a hidden div.

<div class="acf-map" data-zoom="19" data-style="{{ options.map_styles }}">

And get the json this way $el.data('style');

Hope this gets you on the right track.

Related Posts: