All geek questions in one place

Divi - custom map module

I tried to edit the existing Map module styles to get another Map theme instead of the default default, but Divi does not seem to offer this feature.

An 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 can I apply these styles to an 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 it has another way.

+6
source share
2 answers

You can add your own style to 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" }] }] }));
+2
source

You can try the Snazzy Map plugin for colormap in divi, it is easy to handle it. LINK Plugin

You can also visit the main site Snazzy map

If you use this plugin, then the dose is not overwritten with the theme update. Thanks

0
source

Source: https://habr.com/ru/post/1015662/

More articles:


All Articles