Upfront Theme Google Maps Styling

Hi There,

I've recently discovered the joy of Google Maps styling and was wondering how one would go about setting that up in Upfront using the maps element? Also, does the map system in Upfront allow for multiple location markers as well and if so, where should I put the info for that?

Thanks,
K

  • Bojan Radonic

    Hey there @Kekeli, hope you're well today!

    Adding multiple markers is definitely possible. Once you add map element click on the little gear icon in the element and add another location to your map. The result should be another marker on the map, see screenshot.

    As for the styling the map could you please add more information so I can better understand what you're looking to do :slight_smile:

    Looking forward for your response :slight_smile:

    Best regards,
    Bojan

  • Bojan Radonic

    Hey there @Kekeli,

    Thanks for the clarification. Currently the only way to do that would be to edit map element in page content in database. Upfront & its child-themes save all settings to the database. Essentially, any element you move/remove/edit on the Upfront theme, or make any change to the layout gets saved to the DB. The DB data then takes precedence over the theme layouts.

    In phpMyAdmin, select the wp_options table (if you're running a multisite, the table will include the site ID in the prefix like: wp_43_options)

    Once there search for the page where you have map element added, example would be uf-scribe-single-page-9. Click edit and you'll be able to find map where you can add these styles. Currently this is the only way to do it but I'll gladly add this as a featured request for upfront themes so this can be done from the customizer in the future.

    As for the map width you should be able to simply drag the map to increase it width in the upfront customizer, see screenshot.

    Hope this helps :slight_smile:

    Best regards,
    Bojan

  • Kekeli

    Hi Bojan,

    I have actually set it up on another theme using the method @fitoussi has here for his GeoMyWP plugin: http://geomywp.com/documentation/tips-scripts/geo-my-wp-and-google-maps-styled/. (I an using GeoMyWP on that site so was able to call the functions required)

    I wonder if we can modify it slightly to work with Upfront since it is pretty much just an addition to the function.php file using this code (for some reason it doesn't seem to be on the page in it's entirety anymore so I am adding it as it is on my other site):

    function gmw_map_options( $gmw ) {
    ?>
    <script>
    jQuery(document).ready(function($) {

    //declare new map options array for form ID 1
    gmwMapOptions['1'] = [];
    gmwMapOptions['1']['styles'] = [
    {
    "featureType": "landscape",
    "stylers": [
    {
    "hue": "#FFB000"
    },
    {
    "saturation": 20
    },
    {
    "lightness": -28.400000000000006
    },
    {
    "gamma": 1
    }
    ]
    },
    {
    "featureType": "road.highway",
    "stylers": [
    {
    "hue": "#E8FF00"
    },
    {
    "saturation": -96.6
    },
    {
    "lightness": 113
    },
    {
    "gamma": 1
    }
    ]
    },
    {
    "featureType": "road.arterial",
    "stylers": [
    {
    "hue": "#FF8300"
    },
    {
    "saturation": -77
    },
    {
    "lightness": 27.400000000000006
    },
    {
    "gamma": 1
    }
    ]
    },
    {
    "featureType": "road.local",
    "stylers": [
    {
    "hue": "#FF8C00"
    },
    {
    "saturation": -96.6
    },
    {
    "lightness": 34.400000000000006
    },
    {
    "gamma": 1
    }
    ]
    },
    {
    "featureType": "water",
    "stylers": [
    {
    "hue": "#00C4FF"
    },
    {
    "saturation": 22.799999999999997
    },
    {
    "lightness": -11.399999999999991
    },
    {
    "gamma": 1
    }
    ]
    },
    {
    "featureType": "poi",
    "stylers": [
    {
    "hue": "#9FFF00"
    },
    {
    "saturation": 0
    },
    {
    "lightness": -23.200000000000003
    },
    {
    "gamma": 1
    }
    ]
    }
    ]

    As for the drag aspect of the map size, it fills with width of the site (1080px for example), but not the entire width of the window which is what I am leaning more towards, kinda like this http://www.airdriespringsdental.com/ (bottom of page).

    Take care,
    K

  • Bojan Radonic

    Hey again @Kekeli,

    I don't believe that will work since Upfront works differently from other regular WP themes. Currently the only way to do that is in the database as mentioned in my previous post. I've suggested the feature and it will most likely be included in one of the following updates so you'll be able to add styles in the front.

    As for the width of the map, maximum width of the content area is 1080px, so you can't display map in full width, you can only apply background to full width and also use floating regions to place region outside of the content area.

    Hope this helps :slight_smile:

    Best regards,
    Bojan

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.