Use styled maps with the gmap API v3 module

Just following up on this issue. Is there any way to pass the style through the macro now that we're on gmaps v3 api? I've tried all combinations of arguments in the macro.

Here's a hack I've been getting by with if anyone else needs is, add the following code to gmap.js above line 358 ( obj.map = new google.maps.Map(elem, obj.opts); )

obj.opts.styles = [
{
"stylers": [
{ "hue": "#0044ff" },
{ "lightness": 58 },
{ "weight": 1.5 },
{ "saturation": -69 }
]
}
];

It unfortunately applies the style to all maps though. Works for now until there's a way to pass through the macro.

Line numbers change from version to version. Could you post a little snippet, or the gmap.js file you're working with? I would love to see how you did it.

Thanks!

I used the Gmaps Style Wizard to craft a style and copy the JSON code generated by the wizzard.

I edited the sites/all/modules/gmap/js/gmap.js file at approximately line 358 to read as follows:

    obj.bind("boot", function () {
         obj.opts.styles = [ your JSON code here ]
         obj.map = new google.maps.Map(elem, obj.opts);
        //console.log(obj.map);
    });

I had to both clear my cache and wipe all the .js files out of the directory at sites/default/files/js. Reloading the page shows me a styled map matching the wizard. It is true, this affects all Gmap outputs sitewide.

I have not determined how to restore map markers from the Location module. Working on that next.

This is a crap way to get styled maps since any GMap module update will cramp my style and probably kill the map output until the caches are cleared. But if we can get a model here then we can get it done properly in the module.

Update, clearing cache again put the markers back on the map. Silly thing.

Here's a working example, implemented as a js file loaded in my theme.

// Style Gmap using JSON 

(function ($) {
  Drupal.gmap.addHandler('gmap', function(elem) {
    var obj = this;
      obj.bind("boot", function () {
        obj.opts.styles = [ 
          {
            "featureType": "poi",
            "stylers": [
              { "visibility": "off" }
            ]
          },{
            "featureType": "road",
            "stylers": [
              { "visibility": "off" }
            ]
          },{
            "featureType": "water",
            "stylers": [
              { "visibility": "on" },
              { "color": "#84ccde" }
            ]
          },{
            "featureType": "water",
            "elementType": "labels",
            "stylers": [
              { "color": "#808080" },
              { "visibility": "on" },
              { "weight": 0.1 }
            ]
          },{
            "featureType": "administrative.country",
            "stylers": [
              { "visibility": "on" },
              { "color": "#808080" },
              { "weight": 0.1 }
            ]
          },{
            "featureType": "landscape",
            "stylers": [
              { "visibility": "on" },
              { "color": "#bfe9ef" }
            ]
          },{
            "featureType": "administrative.province",
            "elementType": "labels",
            "stylers": [
              { "color": "#808080" },
              { "visibility": "on" },
              { "weight": 0.1 }
            ]
          },{
            "featureType": "administrative.locality",
            "stylers": [
              { "visibility": "off" }
            ]
          },{
            "featureType": "administrative.neighborhood",
            "stylers": [
              { "visibility": "off" }
            ]
          }
        ]
        obj.map = new google.maps.Map(elem, obj.opts);
      
      });
    });

})(jQuery);

Sweet. That's working here for me, too. It has the same issue of applying the styling to all maps site wide, but it doesn't require hacking the module.

works for me too. thanks for sharing!

It would be sweet if this were a field in the GMap module into which the user could paste the entire JSON code. Then a field per view in the Location module.

Not the ideal solution either, but as we needed a quick fix at our current project... This works with the added patch. This will set it globally, but you could filter based on map id.

function my_module_gmap($action, &$vars) {
  if($action == 'parse_macro') {
    $vars['mapstyles'] = [
      [
        "elementType"=> "labels",
        "stylers"=> [
          [ "visibility"=> "off" ]
        ]
      ],[
        "featureType"=> "road",
        "stylers"=> [
          [ "visibility"=> "off" ]
        ]
      ],[
        "featureType"=> "landscape",
        "elementType"=> "geometry.fill",
        "stylers"=> [
          [ "lightness"=> 30 ],
          [ "visibility"=> "off" ]
        ]
      ],[
        "featureType"=> "poi",
        "stylers"=> [
          [ "visibility"=> "off" ]
        ]
      ],[
        "featureType"=> "water",
        "stylers"=> [
          [ "lightness"=> -5 ],
          [ "saturation"=> -85 ],
          [ "hue"=> "#00ccff" ]
        ]
      ],[
        "featureType"=> "transit",
        "stylers"=> [
          [ "saturation"=> -78 ],
          [ "visibility"=> "off" ]
        ]
      ]
    ];
  }
}

bumping version

toddviola: you've probably saved me hours of work. Thanks.

The attached patch is rolled against the latest 7.x-2.x-dev.

thank, merged

Thank you. Can you document how to use this feature for a noob?

Like applying a style (pasted JSON code) to a specific map?

ip_geoloc module is easier to use in this regard (just paste code in a View map display)

sorry for reopening this - but I needed to fix it in order for styles to work.

I also had to add the JSON.parse fix to get the styles to apply.

I can confirm that the JSON.parse addition seems to be necessary. I'm attaching a re-rolled patch that should apply to the current dev branch.

@kopeboy, here's one example of how to use this:

/**
 * Implements template_preprocess_html().
 * (You can put this code somewhere more specific, based on
 * where your map is displayed, but this is an easy general example).
 */
function mytheme_preprocess_html(&$variables) {

  $my_map_styles = array(
    array(
      'featureType' => 'water',
      'stylers' => array(
        array(
          'color' => '#445566'),
      ),
    ),
    array(
      'featureType' => 'landscape.natural.landcover',
      'stylers' => array(
        array(
          'color' => '#aabbcc'
        ),
      ),
    ),
    array(
      'featureType' => 'landscape.natural.terrain',
      'stylers' => array(
        array(
          'color' => '#ccbbaa'
        ),
      ),
    ),
    array(
      'featureType' => 'landscape.natural',
      'stylers' => array(
        array(
          'color' => '#ff7799'
        ),
      ),
    ),
    array(
      'featureType' => 'poi.park',
      'stylers' => array(
        array(
          'visibility' => 'off'
        ),
      ),
    ),
  );

  $gmap_style_settings = array(
    'gmap' => array(
      'MY_GMAP_ID' => array(
        'mapstyles' => drupal_json_encode($my_map_styles),
      ),
    ),
  );

  drupal_add_js($gmap_style_settings, 'setting');
}

You can also just paste the JSON you might get from a Google wizard or elsewhere and drop it into the settings array as a string (instead of drupal_json_encode($my_map_styles) in the example above). If you don't see it working at first, check to make sure you have the right number of nested arrays in the JSON that ends up in Drupal.gmap.addHandler().

Here's a fancier patch in case that's more convenient.

Looks like tests are failing on all recent patches, perhaps unrelated to anything in this issue...

Testing are currently failing for all patches. It seems we'd have to take care of #2778721: [Patch Blocker] - Repair the failing testGmapSaveConfig test first.

The patch has been queued for re-testing as soon as the -dev branch is passing.

I use the JS version named in #6 with preprocess_page hook and drupal_add_js with 'scope' => 'footer', 'weight' => 5 as options and worked perefectly. Thanks!

2019 Status Summary :

Gmap module currently has the ability to modify the style of a map for version 3.
However, the style data is expected to have an array format.
This patch changes the expected format to json so you can copy and paste into a file and load it as the style data directly.

#6 creates it own map and assigns styles. or some js magic. I'm not really sure as I don't dabble so much in the arts. This isn't really a Drupal solution, but others say it works for them. It's something I'd expect to see in a wordpress theme.
#10 was actually implemented and is currently available.
#14 is the accepted patch based entirely from #10
#20 is the first path for converting the expected data to json
and the rest are all adaptations of that.

One could argue that converting the json data to an array is trivial using an online tool.
https://wtools.io/convert-json-to-php-array

That's the current status.
I personally chose to leave it as is and convert the generated json into an array.
If the module changes, I'd follow suit.

peace,
Michael

Hi guys, i worked on issue https://www.drupal.org/project/gmap/issues/1794230 and seems it is the same. Could you please review patch in that issues not to crosspost patches.