I have an option page where i can create maps, i created a custom field to paste my own styles. What i need to do is pass this informations in my maps.js. What i have done is create an hidden div like this (i'm using timber) :

<div class="hidden" id="map-styles">{{ options.map_styles }}</div>

Then in maps.js i get this informations like this :

function initMap($el) {

// Find marker elements within map.
var $markers = $el.find(".marker");
var styles = document.getElementById("map-styles").textContent;

// Create generic map.
var mapArgs = {
zoom: $el.data("zoom") || 16,
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: styles,
};

But it's not working, however if i'm doing a console.log('styles'), i see my code and if i paste my code directly in my js file it's working. Do you guys have any idea of how to solve this ? Is it a formating issue or something like that, I would really appreciate if you could put me on the right track.

You can see the map here : /

Thanks

I have an option page where i can create maps, i created a custom field to paste my own styles. What i need to do is pass this informations in my maps.js. What i have done is create an hidden div like this (i'm using timber) :

<div class="hidden" id="map-styles">{{ options.map_styles }}</div>

Then in maps.js i get this informations like this :

function initMap($el) {

// Find marker elements within map.
var $markers = $el.find(".marker");
var styles = document.getElementById("map-styles").textContent;

// Create generic map.
var mapArgs = {
zoom: $el.data("zoom") || 16,
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: styles,
};

But it's not working, however if i'm doing a console.log('styles'), i see my code and if i paste my code directly in my js file it's working. Do you guys have any idea of how to solve this ? Is it a formating issue or something like that, I would really appreciate if you could put me on the right track.

You can see the map here : http://thefabulous.odns.fr/

Thanks

• advanced-custom-fields
• google-maps

Share Improve this question asked May 18, 2020 at 13:17 loicdlsloicdls 311 bronze badge 1

• You should include a sample of what the map styles look like when you input them and what they look like when you output them. – Tony Djukic Commented May 18, 2020 at 14:16

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

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/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.