• 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)
  • 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 7 years, 5 months ago by Robswaimea.

    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.