How to place full-width multi-point map in Upfront

I would like to have full-width map on the site created with Upfront with more than one POI on it.
I can use Map as a background but I cannot see a way to add there more than one point (as well as to add custom icon, etc.)
I can use Google Map plugin but I don't know how to make it full-width within Upfront.
Could you advise me the best way to achieve that?

Best regards
Paulina

  • Michael Bissett

    Hey Paulina, Michael here! :slight_smile:

    how to make this widget container 100% width - it is created as contained although region is 100% width.

    Elements placed on the page will take up the width of the content region, rather than the full width of the page.

    The other thing is that I have problem loading a map from Google Maps Widget.

    I'm aware of issues with displaying maps via the Google Maps widget inside of Upfront (not to confuse that with the Maps element that we provide in Upfront, that's a different one), I believe that's where my colleague Jude advised the use of a shortcode instead.

    You'd be looking to insert the map shortcode into either a Text element, or a Widget element (with a Text widget selected). You'd also want to enable the "Responsive Maps" add-on inside of:

    Settings -> Google Maps -> Add-ons

    And insert the "is_responsive" parameter, like this:

    [map id="1" is_responsive="true"]

    (changing "1" to the ID for your map)

    This would still result in a map that fits the content width, rather than a full page map. Trying to make a full page map with the widget should be technically possible via CSS, but it's more likely to cause problems later on down the road, when you're styling your site.

    Kind Regards,
    Michael

  • Michael Bissett

    Hey @pstarzynska,

    The point I'm making here is that right now, with any of these options:

    #1: Our Google Maps plugin
    #2: The Maps element within Upfront
    #3: A Map background set for a region

    Setting a full width like this, with multiple markers, is not possible at this time.

    Using the Google Maps shortcode would be a way to do it, but the reason why I didn't prescribe the CSS solution is because we'd have to target the region's CSS ID (and if you change things later, the code to target that may not work).

    From my own attempts in trying to make a 100% width for something within the content area, it does take more than a bit of effort to execute that idea, and to have it all look nice.

    A tool that can help with inspecting the CSS, and making tweaks accordingly, would be your browser's developer tools. I use Google Chrome's Developer Tools, which we have a guide handy for over here:

    https://premium.wpmudev.org/blog/chrome-developer-tools/

    This will require some poking and prodding (as can be the case sometimes when crafting CSS code in general).

    For your efforts, if trying to cook up the CSS required for this isn't something you'd want to do, then the path I mentioned in my prior post would need to be done for now.

    Kind Regards,
    Michael

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.