Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #323027

    Hi,

    I use the Enfold theme and the within delivered Google Maps Plugin.
    But I’ve customised the gMaps behaviour to serve my own needs.
    My Question: How to move those customisation into a child theme?

    Background:
    Within the “/wp-content/themes/enfold/framework/php/class-framework-widgets.php” at line ~1200 I customised some JS values to have a own color styling for gMaps. This is done within the PHP variable “$avia_maps_config” within the PHP function “avia_printmap”. And at the end, as you know, all things will be written to “$output” and than in the JS-Setup which gets written to HTML of the page. Works all well.

    But what do I need to do, if I want this customised thin into child theme?
    (So I could update your theme easy on a regular basis.)

    Example:

    
    $avia_maps_config = "
    		var directionsDisplay;
    		directionsDisplay = new google.maps.DirectionsRenderer;
    		var directionsService = new google.maps.DirectionsService;
    		var map;
    		var latlng = new google.maps.LatLng(".$lat.", ".$lng.");
    		var directionsto = '".$directionsto."';
    
    		var customGMapStyle = [
    					{
    						'featureType': 'landscape',
    						'stylers': [
    							{'hue': '#A4FF00' },
    							{'saturation': -8.5 },
    							{'lightness': 5.4	},
    							{'gamma': 1	}
    						]
    					},
    					{
    						'featureType': 'road.highway',
    						'stylers': [
    							{'hue': '#A8FF00'},
    							{'saturation': -79.3},
    							{'lightness': 28.3},
    							{'gamma': 1}
    						]
    					},
    					{
    						'featureType': 'road.arterial',
    						'stylers': [
    							{'hue': '#A8FF00'},
    							{'saturation': -79.3},
    							{'lightness': 19.5},
    							{'gamma': 1}
    						]
    					},
    					{
    						'featureType': 'road.local',
    						'stylers': [
    							{'hue': '#A8FF00'},
    							{'saturation': -79.3},
    							{'lightness': 19.0},
    							{'gamma': 1}
    						]
    					},
    					{
    						'featureType': 'water',
    						'stylers': [
    							{'hue': '#007FFF'},
    							{'saturation': 2.0},
    							{'lightness': 21.5},
    							{'gamma': 1}
    						]
    					},
    					{
    						'featureType': 'poi',
    						'stylers': [
    							{'hue': '#A1FF00'},
    							{'saturation': -15.0},
    							{'lightness': 6.2},
    							{'gamma': 1}
    						]
    					}
    		];
    
    		var myOptions = {
    		  
    		  zoom: ".$zoom.",                          /* Zoom stat value by Widget */
      		  maxZoom: 14,								/* Max Zoom in (15) */
      		  minZoom: 5,								/* Max Zoom out (0) */
    		  zoomControl: true,                        /* Zoom UI on */
      		  zoomControlOptions: {style: google.maps.ZoomControlStyle.SMALL},
    
    		  navigationControl: true,					
    		  navigationControlOptions: {style:google.maps.NavigationControlStyle.SMALL},
    
    		  scrollwheel: false,						/* Mouseweel support on */
    		  keyboardShortcuts: false,					/* Shortcuts on */
    
        	  panControl: false,                        /* Move UI on */
        	  scaleControl: false,                      /* Zoom UI on */
        	  streetViewControl: true,					/* Streetview on */
    
    		  mapTypeId: google.maps.MapTypeId.".$type.",
        	  mapTypeControl: false,                    /* MapType UI on */ 
    		  mapTypeControlOptions: {style:google.maps.MapTypeControlStyle.DROPDOWN_MENU},
    
    		  center: new google.maps.LatLng(".($lat - 0.03).", ".$lng."), /* Fake center by (~70px) to custom css setup */
    
    		  styles: customGMapStyle
    
    		};
    		
    		var map = new google.maps.Map(document.getElementById('avia_google_maps_$unique'), myOptions);
    
    		if(directionsto.length > 5)
    		{
    		  directionsDisplay.setMap(map);
    		  var request = {
    		     origin:directionsto,
    		     destination:latlng,
    		     travelMode:google.maps.DirectionsTravelMode.DRIVING
    		};
    		  directionsService.route(request, function(response, status) {
    		     if(status == google.maps.DirectionsStatus.OK) {
    		        directionsDisplay.setDirections(response)
    		     }
    		  })
    		}
    		else
    		{
    		  var contentString = '".$content."';
    		  var infowindow = new google.maps.InfoWindow({
    		     content: contentString
    		  });
    		  var marker = new google.maps.Marker({
    		     position: latlng,
    		     map: map,
    		     icon: '".$icon."',
    		     title: ''
    		  });
    
    		  google.maps.event.addListener(marker, 'click', function() {
    			  infowindow.open(map,marker);
    		  });
    		}";
    

    Hope you could help me out.
    As all my trying failed. Thanks.

    Greez Jens

    #323343

    No one?
    Or is this simply impossible?

    #323490

    Hey!

    Thank you for using Enfold.

    You can copy the whole avia_printmap function on the child theme’s functions.php file.

    Cheers!
    Ismael

    #323567

    Hi,

    thanks for the reply.

    So no into: “/wp-content/themes/enfold-child/framework/php/class-framework-widgets.php”
    But into: “/wp-content/themes/enfold-child/functions.php”.

    Right?

    Greez Jens

    #324053

    Hi Jens!

    Correct, the theme checks if the avia_printmap exists in the child theme functions.php, if it does it will load that instead.

    Regards,
    Josue

    #632151

    Hi Jens,
    I’m not sure if you figured it out, but I also need to style my map and want to use enfold-child/functions.php. Can you post your solution here if you solved it?

    Thanks!

    Regards,
    Roger

    #632307

    Hi Roger,

    If you want to modify an Enfold Widget simply paste the widget code into functions.php, for example for the Maps:

    class avia_google_maps extends WP_Widget {
    ....
    }

    Best regards,
    Josue

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.