Google Map custom styles

This topic has 2 replies, 3 voices, and was last updated 7 years, 4 months ago by Anh Tran.

Viewing 3 posts - 1 through 3 (of 3 total)

Author

Posts

June 30, 2017 at 5:55 PM #6212

Participant

Hi,

I would like to show google maps customly styled in the front end. I am trying to add styles option, but it does not work. How shall I add the styles properly?

Thank you!

This is what I have at the moment:

$args = array(
   'type'         => 'map',
   'width'        => '100%',
   'height'       => '480px',
   'js_options'   => array(
      'mapTypeId'      => 'ROADMAP',
      'styles' => '[{"featureType":"administrative","elementType":"all","stylers":[{"saturation":"-100"}]},{"featureType":"administrative.province","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"landscape","elementType":"all","stylers":[{"saturation":-100},{"lightness":65},{"visibility":"on"}]},{"featureType":"poi","elementType":"all","stylers":[{"saturation":-100},{"lightness":"50"},{"visibility":"simplified"}]},{"featureType":"road","elementType":"all","stylers":[{"saturation":"-100"}]},{"featureType":"road.highway","elementType":"all","stylers":[{"visibility":"simplified"}]},{"featureType":"road.arterial","elementType":"all","stylers":[{"lightness":"30"}]},{"featureType":"road.local","elementType":"all","stylers":[{"lightness":"40"}]},{"featureType":"transit","elementType":"all","stylers":[{"saturation":-100},{"visibility":"simplified"}]},{"featureType":"water","elementType":"geometry","stylers":[{"hue":"#ffff00"},{"lightness":-25},{"saturation":-97}]},{"featureType":"water","elementType":"labels","stylers":[{"lightness":-25},{"saturation":-100}]}]'
)
);

echo rwmb_meta( 'my_id', $args );