Title: Stylisation Google Maps
Last modified: June 4, 2017

---

# Stylisation Google Maps

 *  Resolved [ismaildedicated](https://wordpress.org/support/users/ismaildedicated/)
 * (@ismaildedicated)
 * [8 years, 11 months ago](https://wordpress.org/support/topic/stylisation-google-maps/)
 * Hello everyone,
 * Personnaly I can’t customize my map on event-manager.
    I putted these lines on
   the event-manager.js that I found on the Google Maps API documentation :
 * var styledMapType = new google.maps.StyledMapType(
    [ {elementType: “geometry”,
   stylers: [{“color”: “#212121”}] }, {elementType: “labels.icon”,stylers: [{ “visibility”:“
   off”}] }, {elementType: “labels.text.fill”,stylers: [{ “color”: “#757575”}] },{
   elementType: “labels.text.stroke”,stylers: [{ “color”: “#212121”}] }, { featureType:“
   administrative”, elementType: “geometry”, stylers: [{ “color”: “#757575”}] },{
   featureType: “administrative.country”, elementType: “labels.text.fill”, stylers:[{“
   color”: “#9e9e9e”}] }, { featureType: “administrative.land_parcel”, stylers: [{“
   visibility”: “off”}] }, { featureType: “administrative.locality”, elementType:“
   labels.text.fill”, stylers: [{ “color”: “#bdbdbd”}] }, { featureType: “poi”, 
   elementType: “labels.text.fill”, stylers: [{ “color”: “#757575”}] }, { featureType:“
   poi.park”, elementType: “geometry”, stylers: [{ “color”: “#181818”}] }, { featureType:“
   poi.park”, elementType: “labels.text.fill”, stylers: [{ “color”: “#616161”}] },{
   featureType: “poi.park”, elementType: “labels.text.stroke”, stylers: [{ “color”:“#
   1b1b1b”}] }, { featureType: “road”, elementType: “geometry.fill”, stylers: [{“
   color”: “#2c2c2c”}] }, { featureType: “road”, elementType: “labels.text.fill”,
   stylers: [{ “color”: “#8a8a8a”}] }, { featureType: “road.arterial”, elementType:“
   geometry”, stylers: [{ “color”: “#373737”}] }, { featureType: “road.highway”,
   elementType: “geometry”, stylers: [{ “color”: “#3c3c3c”}] }, { featureType: “
   road.highway.controlled_access”, elementType: “geometry”, stylers: [{ “color”:“#
   4e4e4e”}] }, { featureType: “road.local”, elementType: “labels.text.fill”, stylers:[{“
   color”: “#616161”}] }, { featureType: “transit”, elementType: “labels.text.fill”,
   stylers: [{ “color”: “#757575”}] }, { featureType: “water”, elementType: “geometry”,
   stylers: [{ “color”: “#000000”}] }, { featureType: “water”, elementType: “labels.
   text.fill”, stylers: [{ “color”: “#3d3d3d”}] } ], {name: ‘Styled Map’}); var 
   map = new google.maps.Map( document.getElementById(’em-map’), { zoom: 14, center:
   em_LatLng, mapTypeId: google.maps.MapTypeId.ROADMAP, mapTypeControlOptions: {
   mapTypeIds: [ google.maps.MapTypeId.ROADMAP, ‘styled_map’] }, mapTypeControl:
   false }); map.mapTypes.set(‘styled_map’, styledMapType); map.setMapTypeId(‘styled_map’);
 * But the map is still the same with the classic skin, instead of being on the 
   Dark Skin.
 * Anyone can help ?
 * (I replaced event-manager.js and event-manager.min.js on the FTP)
 * Thank you all

Viewing 2 replies - 1 through 2 (of 2 total)

 *  [Robswaimea](https://wordpress.org/support/users/robswaimea/)
 * (@robswaimea)
 * [8 years, 11 months ago](https://wordpress.org/support/topic/stylisation-google-maps/#post-9198173)
 * Take all that stuff out of the .js files you modified.
    just as a “disclaimer”
   you shouldn’t modify core files (but you probably already know that stuff… blah
   blah blah..)
 * Try placing the below code in your Foot file
    In you child theme.. and or make
   a back up of your “footer.php” before editing it…
 * While not all the code you want from your snippet… it will give you something
   to work off of. (it works for me, but I may have some slight mods we may have
   to tweak for you..)
 * It will give you a bench mark to move forward.. hopefully it will work for you.
 *     ```
       <script type="text/javascript">
       jQuery(document).bind('em_maps_location_hook', function( e, map,data, marker ){
       //Set map styles
       var styles = [
       {"elementType":"geometry","stylers":[{"hue":"#ff4400"},{"saturation":-68},{"lightness":-4},{"gamma":0.72}]},
       {"featureType":"road","elementType":"labels.icon"},
       {"featureType":"landscape.man_made","elementType":"geometry","stylers":[{"hue":"#0077ff"},{"gamma":3.1}]},
       {"featureType":"water","stylers":[{"hue":"#00ccff"},{"gamma":0.44},{"saturation":+73}]},
   
       {"featureType":"poi.park","stylers":[{"hue":"#44ff00"},{"saturation":+83}]},
       {"featureType":"poi.park","elementType":"labels.text.stroke","stylers":[{"gamma":3.1},{"weight":1.1},{"saturation":19},{"hue":"#000000"},{"lightness":-86}]},
   
       {"featureType":"water","elementType":"labels.text.fill","stylers":[{"hue":"#007fff"},{"gamma":0.77},{"saturation":65},{"lightness":99}]},
       {"featureType":"water","elementType":"labels.text.stroke","stylers":[{"gamma":0.11},{"weight":5.6},{"saturation":99},{"hue":"#0091ff"},{"lightness":-86}]},
       {"featureType":"transit.line","elementType":"geometry","stylers":[{"lightness":-48},{"hue":"#ff5e00"},{"gamma":1.2},{"saturation":-23}]},
       {"featureType":"transit","elementType":"labels.text.stroke","stylers":[{"saturation":-64},{"hue":"#ff9100"},{"lightness":16},{"gamma":0.47},{"weight":2.7}]}];
       //Apply map styles
       map.setOptions({styles: styles});
       });
       </script>
       ```
   
 * NOTE this is for a Single Location Map.. a very slight modification of the same
   for All Locations map needs to be made.
 * See if the above works for a Single (Individual) Location Map.
    -  This reply was modified 8 years, 11 months ago by [Robswaimea](https://wordpress.org/support/users/robswaimea/).
 *  [Robswaimea](https://wordpress.org/support/users/robswaimea/)
 * (@robswaimea)
 * [8 years, 11 months ago](https://wordpress.org/support/topic/stylisation-google-maps/#post-9198221)
 * **ALSO NOTE:**
    Look at the PREVIEW or LIVE Location… not the Editing of a Location
   page to test.

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Stylisation Google Maps’ is closed to new replies.

 * ![](https://ps.w.org/events-manager/assets/icon-256x256.png?rev=1039078)
 * [Events Manager - Calendar, Bookings, Tickets, and more!](https://wordpress.org/plugins/events-manager/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/events-manager/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/events-manager/)
 * [Active Topics](https://wordpress.org/support/plugin/events-manager/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/events-manager/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/events-manager/reviews/)

## Tags

 * [event-manager](https://wordpress.org/support/topic-tag/event-manager/)

 * 2 replies
 * 2 participants
 * Last reply from: [Robswaimea](https://wordpress.org/support/users/robswaimea/)
 * Last activity: [8 years, 11 months ago](https://wordpress.org/support/topic/stylisation-google-maps/#post-9198221)
 * Status: resolved