I've tried to edit the existing Map module's styles to get another Map theme instead of the default one, but Divi doesn't seem to offer that feature.
Example of the mentioned styles:
center: { lat: 40.674, lng: -73.945 }, zoom: 12, styles: [{ "featureType": "all", "elementType": "geometry", "stylers": [{ "color": "#8754c4" }] }, { "featureType": "all", "elementType": "labels.text.fill", "stylers": [{ "gamma": 0.01 }, { "lightness": 20 }] }, { "featureType": "all", "elementType": "labels.text.stroke", "stylers": [{ "saturation": -31 }, { "lightness": -33 }, { "weight": 2 }, { "gamma": 0.8 }] }, { "featureType": "all", "elementType": "labels.icon", "stylers": [{ "visibility": "off" }] }, { "featureType": "administrative", "elementType": "labels", "stylers": [{ "color": "#ffffff" }] }, { "featureType": "administrative", "elementType": "labels.text.stroke", "stylers": [{ "visibility": "off" }] }, { "featureType": "landscape", "elementType": "geometry", "stylers": [{ "lightness": 30 }, { "saturation": 30 }] }, { "featureType": "landscape", "elementType": "labels.text", "stylers": [{ "visibility": "off" }] }, { "featureType": "landscape", "elementType": "labels.text.stroke", "stylers": [{ "visibility": "off" }] }, { "featureType": "poi", "elementType": "all", "stylers": [{ "visibility": "on" }] }, { "featureType": "poi", "elementType": "geometry", "stylers": [{ "saturation": 20 }, { "visibility": "on" }] }, { "featureType": "poi", "elementType": "geometry.fill", "stylers": [{ "color": "#8945c7" }] }, { "featureType": "poi", "elementType": "geometry.stroke", "stylers": [{ "visibility": "off" }] }, { "featureType": "poi", "elementType": "labels", "stylers": [{ "visibility": "off" }] }, { "featureType": "poi.park", "elementType": "geometry", "stylers": [{ "lightness": 20 }, { "saturation": -20 }] }, { "featureType": "road", "elementType": "geometry", "stylers": [{ "lightness": 10 }, { "saturation": -30 }] }, { "featureType": "road", "elementType": "geometry.stroke", "stylers": [{ "saturation": 25 }, { "lightness": 25 }] }, { "featureType": "road", "elementType": "labels", "stylers": [{ "color": "#ffffff" }] }, { "featureType": "road", "elementType": "labels.text", "stylers": [{ "color": "#ffffff" }, { "visibility": "on" }] }, { "featureType": "road", "elementType": "labels.text.fill", "stylers": [{ "color": "#ffffff" }] }, { "featureType": "road", "elementType": "labels.text.stroke", "stylers": [{ "visibility": "off" }, { "color": "#ff0000" }] }, { "featureType": "transit", "elementType": "labels", "stylers": [{ "visibility": "off" }] }, { "featureType": "transit", "elementType": "labels.text", "stylers": [{ "visibility": "off" }] }, { "featureType": "transit", "elementType": "labels.text.stroke", "stylers": [{ "visibility": "off" }] }, { "featureType": "water", "elementType": "all", "stylers": [{ "lightness": -20 }] }, { "featureType": "water", "elementType": "geometry", "stylers": [{ "color": "#7950a9" }] }] How would I go about applying these styles to the existing Map module? Is there an external plugin for this feature?
https://elegantmarketplace.com/downloads/divi-map-extended-module/
This paid module adds these features, but I'm wondering if there's another way to go about it.
1 Answers
Answers 1
you can add your custom style in this file:
/wp-content/themes/Divi/includes/builder/scripts/frontend-builder-scripts.js Line 2405, replace this:
$this_map_container.data('map', new google.maps.Map( $this_map[0], { zoom: parseInt( $this_map.attr('data-zoom') ), center: new google.maps.LatLng( parseFloat( $this_map.attr('data-center-lat') ) , parseFloat( $this_map.attr('data-center-lng') )), mapTypeId: google.maps.MapTypeId.ROADMAP, scrollwheel: $this_map.attr('data-mouse-wheel') == 'on' ? true : false, draggable: is_draggable, panControlOptions: { position: $this_map_container.is( '.et_beneath_transparent_nav' ) ? google.maps.ControlPosition.LEFT_BOTTOM : google.maps.ControlPosition.LEFT_TOP }, zoomControlOptions: { position: $this_map_container.is( '.et_beneath_transparent_nav' ) ? google.maps.ControlPosition.LEFT_BOTTOM : google.maps.ControlPosition.LEFT_TOP }, styles: [ { stylers: [ { saturation: parseInt( this_map_grayscale ) } ] } ] })); with this:
$this_map_container.data('map', new google.maps.Map( $this_map[0], { zoom: parseInt( $this_map.attr('data-zoom') ), center: new google.maps.LatLng( parseFloat( $this_map.attr('data-center-lat') ) , parseFloat( $this_map.attr('data-center-lng') )), mapTypeId: google.maps.MapTypeId.ROADMAP, scrollwheel: $this_map.attr('data-mouse-wheel') == 'on' ? true : false, draggable: is_draggable, panControlOptions: { position: $this_map_container.is( '.et_beneath_transparent_nav' ) ? google.maps.ControlPosition.LEFT_BOTTOM : google.maps.ControlPosition.LEFT_TOP }, zoomControlOptions: { position: $this_map_container.is( '.et_beneath_transparent_nav' ) ? google.maps.ControlPosition.LEFT_BOTTOM : google.maps.ControlPosition.LEFT_TOP }, styles: [{ "featureType": "all", "elementType": "geometry", "stylers": [{ "color": "#8754c4" }] }, { "featureType": "all", "elementType": "labels.text.fill", "stylers": [{ "gamma": 0.01 }, { "lightness": 20 }] }, { "featureType": "all", "elementType": "labels.text.stroke", "stylers": [{ "saturation": -31 }, { "lightness": -33 }, { "weight": 2 }, { "gamma": 0.8 }] }, { "featureType": "all", "elementType": "labels.icon", "stylers": [{ "visibility": "off" }] }, { "featureType": "administrative", "elementType": "labels", "stylers": [{ "color": "#ffffff" }] }, { "featureType": "administrative", "elementType": "labels.text.stroke", "stylers": [{ "visibility": "off" }] }, { "featureType": "landscape", "elementType": "geometry", "stylers": [{ "lightness": 30 }, { "saturation": 30 }] }, { "featureType": "landscape", "elementType": "labels.text", "stylers": [{ "visibility": "off" }] }, { "featureType": "landscape", "elementType": "labels.text.stroke", "stylers": [{ "visibility": "off" }] }, { "featureType": "poi", "elementType": "all", "stylers": [{ "visibility": "on" }] }, { "featureType": "poi", "elementType": "geometry", "stylers": [{ "saturation": 20 }, { "visibility": "on" }] }, { "featureType": "poi", "elementType": "geometry.fill", "stylers": [{ "color": "#8945c7" }] }, { "featureType": "poi", "elementType": "geometry.stroke", "stylers": [{ "visibility": "off" }] }, { "featureType": "poi", "elementType": "labels", "stylers": [{ "visibility": "off" }] }, { "featureType": "poi.park", "elementType": "geometry", "stylers": [{ "lightness": 20 }, { "saturation": -20 }] }, { "featureType": "road", "elementType": "geometry", "stylers": [{ "lightness": 10 }, { "saturation": -30 }] }, { "featureType": "road", "elementType": "geometry.stroke", "stylers": [{ "saturation": 25 }, { "lightness": 25 }] }, { "featureType": "road", "elementType": "labels", "stylers": [{ "color": "#ffffff" }] }, { "featureType": "road", "elementType": "labels.text", "stylers": [{ "color": "#ffffff" }, { "visibility": "on" }] }, { "featureType": "road", "elementType": "labels.text.fill", "stylers": [{ "color": "#ffffff" }] }, { "featureType": "road", "elementType": "labels.text.stroke", "stylers": [{ "visibility": "off" }, { "color": "#ff0000" }] }, { "featureType": "transit", "elementType": "labels", "stylers": [{ "visibility": "off" }] }, { "featureType": "transit", "elementType": "labels.text", "stylers": [{ "visibility": "off" }] }, { "featureType": "transit", "elementType": "labels.text.stroke", "stylers": [{ "visibility": "off" }] }, { "featureType": "water", "elementType": "all", "stylers": [{ "lightness": -20 }] }, { "featureType": "water", "elementType": "geometry", "stylers": [{ "color": "#7950a9" }] }] })); 
0 comments:
Post a Comment