1

I used the google map styling wizard to generate this JSON frag.

[ { "featureType": "road.highway", "stylers": [ { "visibility": "on" } ] },{ "featureType": "road.local", "stylers": [ { "visibility": "on" } ] },{ "featureType": "road.arterial", "stylers": [ { "visibility": "on" } ] } ]

But I have no idea what to do with it. Where do I put this?

Thanks!

Greg

  • Have you had chance to take a look at this yet Greg? If so, could you please follow-up and let me know if the answer below was helpful? – Nick Benson Jan 6 '14 at 16:25
  • Thanks! I incorporated your comments. My template code is now... {exp:gmap:init styles="/js/map_styles.js" style_var="stylez" id="map" class="gmap" style="width:100%;height:450px" map_type="google.maps.MapTypeId.ROADMAP"} map_styles.js contains... var stylez = [ { "featureType": "poi.business", "stylers": [ { "visibility": "off" } ] } ] But the business featureType is still visible – Greg Fensterman Jan 15 '14 at 21:03
1

I just implemented this on a project yesterday, and agree that the official docs/example is a bit skimpy on details. In any event...

Create a file that includes your JSON object, prefixed with var stylez =, save it as "gmap-styles.js" in a place where your browser can see it.

gmap-styles.js

var stylez = [ { "featureType": "road.highway", "stylers": [ { "visibility": "on" } ] },{ "featureType": "road.local", "stylers": [ { "visibility": "on" } ] },{ "featureType": "road.arterial", "stylers": [ { "visibility": "on" } ] } ]

Then, use use the styles and style_var parameters in {exp:gmap:init} in your template to specify the path to the JS file, as well as the name of the JSON var you saved in it.

some.group/some_template.html

{exp:gmap:init 
    ... a bunch of other params ...
    styles="url/path/to/gmap-styles.js"
    style_var="stylez"
}
| improve this answer | |
  • I was missing the "var stylez =" I know have this in my styles file... var stylez = [ { "featureType": "poi.business", "stylers": [ { "visibility": "off" } ] } ] and my map code is... {exp:gmap:init styles="/js/map_styles.js" style_var="stylez" id="map" class="gmap" style="width:100%;height:450px" map_type="google.maps.MapTypeId.ROADMAP"} – Greg Fensterman Jan 15 '14 at 20:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.