Pop-out Element (google map) on mobile?

jeremy58 · March 19, 2021, 3:46pm

I have a directory section on my site. The top section is a full-width google map to show the listings. That’s fine on desktop, but on mobile I would rather hide it until the user clicks to open it.

It takes up a lot of the viewport, and in general, I don’t really like google maps on mobile… Still, it’s a neat feature, and it’s part of the DOM, anywya, so I want to include it, somehow.

Does anybody have a good way to handle this? The best I can think of is a button with fixed position and then have the map pop out into fullscreen.

Note: The picture below shows OpenStreetMap, but the production version will be Google Maps.

mobile map search

PaulOB · March 19, 2021, 5:29pm

Do it in the same way that you have managed the hamburger. The routines will be almost the same.

Martyr2 · March 19, 2021, 5:32pm

I agree with Paul. Just use a media query. Setup the media query so that if the width is for mobile, it hides the map and presents some kind of toggle to toggle it open. Much like your hamburger menu does there (the three horizontal lines).

Once the user hits the toggle, you can open the map element, size it however you like for the mobile device (again governed by media queries) and be off to the races.

I was going to say the same thing, but he beat me to it.

m3g4p0p · March 19, 2021, 5:37pm

Hi @jeremy58, sure you could just hide it by setting it to display: none initially, or translate it out of the viewport for a neat sliding effect…

HTML

<iframe
  id="google-maps"
  loading="lazy"
  allowfullscreen
  src="https://www.google.com/maps/embed/v1/place?key=YOUR_API_KEY&q=Mainz">
</iframe>
<button id="toggle-button">toggle</button>

CSS

#google-maps {
  position: fixed;
  border: 0;
  width: 100vw;
  height: 100vh;
  transform: translateX(-100vw);
  transition: transform .2s ease;
}

#google-maps.show {
  transform: translateX(0);
}

#toggle-button {
  position: fixed;
  top: 1em;
  right: 1em;
}

JS

const maps = document.getElementById('google-maps')
const toggle = document.getElementById('toggle-button')

toggle.addEventListener('click', () => {
  maps.classList.toggle('show')
})

Of course, this will also unnecessarily load the iframe if the user never chooses to view the map; to avoid this you might also set the iframe source after the first toggle:

HTML

<iframe
  id="google-maps"
  loading="lazy"
  allowfullscreen
  data-src="https://www.google.com/maps/embed/v1/place?key=YOUR_API_KEY&q=Mainz">
</iframe>
<button id="toggle-button">toggle</button>

JS

const maps = document.getElementById('google-maps')
const toggle = document.getElementById('toggle-button')

function showMap () {
  maps.classList.toggle('show')
}

toggle.addEventListener('click', () => {
  if (!maps.src) {
    maps.src = maps.dataset.src
    maps.addEventListener('load', showMap)
  } else {
    showMap()
  }
})

Edit: x-x-post ^^

jeremy58 · March 19, 2021, 5:57pm

As for the hamburger menu, that’s actually included as part of the theme.

So you’re saying something like

@media only screen and (max-width:767px) {
.map:not (.open-map) {display:none}
}

.map.open-map {display:block; position:fixed; height:100vh; width;100vw}

Then just add a button to add/remove .open-map from the .map container?

PaulOB · March 19, 2021, 6:22pm

There should be no space between :not and the open bracket.

You probably just need .map anyway unless there is a specificity reason you added the :not pseudo class.

jeremy58 · March 19, 2021, 6:49pm

Okay that all makes sense.

The next issue I am having is that I don’t have access to easily modify the code that spits out the map (it’s part of a Wordpress Plugin), so I’m basically stuck with a fixed position button that will sit on top of the map once it’s open…

Martyr2 · March 19, 2021, 7:15pm

Well if you can identify the elements and its classes that the plugin uses to create the map, everything we have been saying would be CSS styles that you can put in your styles.css and shouldn’t have to touch the plugin itself.

If the map is inserted using a shortcode too, you could probably wrap the shortcode with a container div tag and use that to then base some styles off of. Might make things a bit simpler.

Edit: Btw, make sure not to touch the plugin code because it will probably be overwritten on next plugin update.

jeremy58 · March 20, 2021, 4:13am

I’m pulling my hair out with this. I can’t make heads or tails with what elements need to be changed for this to work.

<div class="wp-block-group"><div class="wp-block-group__inner-container" id="map-group">
<button id="map-button"> Show Map </button>



<div class="wp-block-geodirectory-geodir-widget-map"><div class="geodir-wgt-map bsui sdel-5e415546"><!--START geodir-map-wrap-->
<div class="geodir-map-wrap geodir-archive-map-wrap ">
	<div id="catcher_gd_map_canvas_archive"></div>
	<!--START stick_trigger_container-->
	<div class="stick_trigger_container bsui">
		<div class="trigger_sticky triggeroff_sticky mt-n5 btn btn-secondary mr-n2 c-pointer" style="display: none;">
			<i class="fas fa-map-marked-alt"></i>
			<i class="fas fa-angle-right"></i>
		</div>
		<!--end of stick trigger container-->
		<div class="geodir_map_container gd_map_canvas_archive bsui position-relative mw-100 geodir-map-small" id="sticky_map_gd_map_canvas_archive" style="width:100%;min-height:325px;">
			<!--END map_background-->
			<div class="map_background">
				<div class="top_banner_section_in clearfix">
					<div class="gd_map_canvas_archive_TopLeft TopLeft position-absolute bg-white text-muted rounded-sm shadow-sm m-2 px-1 py-1 h5 c-pointer" style="margin-top: 85px !important;z-index: 3;">
						<span class="triggermap gd-triggered-map" id="gd_map_canvas_archive_triggermap">
							<i class="fas fa-expand-arrows-alt fa-fw" aria-hidden="true"></i>
							<i class="fas fa-compress-arrows-alt fa-fw d-none" aria-hidden="true"></i>
						</span>
					</div>
					<div class="gd_map_canvas_archive_TopRight TopRight"></div>
					<div id="gd_map_canvas_archive_wrapper" class="main_map_wrapper" style="height:325px;width:100%;">
						<div class="iprelative position-relative">
							<div id="gd_map_canvas_archive" class="geodir-map-canvas leaflet-container leaflet-touch leaflet-retina leaflet-fade-anim leaflet-touch-zoom" data-map-type="archive" data-map-canvas="gd_map_canvas_archive" style="height: 325px; width: 100%; z-index: 0; position: relative;" tabindex="0"><div class="leaflet-pane leaflet-map-pane" style="transform: translate3d(0px, 0px, 0px);"><div class="leaflet-pane leaflet-tile-pane"><div class="leaflet-layer " style="z-index: 1; opacity: 1;"><div class="leaflet-tile-container leaflet-zoom-animated" style="z-index: 21; transform: translate3d(0px, 0px, 0px) scale(1);"><img alt="" role="presentation" src="//b.tile.openstreetmap.org/10/298/387.png" class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; backface-visibility: hidden; transform: translate3d(145px, -5px, 0px); opacity: 1;"><img alt="" role="presentation" src="//c.tile.openstreetmap.org/10/298/388.png" class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; backface-visibility: hidden; transform: translate3d(145px, 251px, 0px); opacity: 1;"><img alt="" role="presentation" src="//a.tile.openstreetmap.org/10/297/387.png" class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; backface-visibility: hidden; transform: translate3d(-111px, -5px, 0px); opacity: 1;"><img alt="" role="presentation" src="//c.tile.openstreetmap.org/10/299/387.png" class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; backface-visibility: hidden; transform: translate3d(401px, -5px, 0px); opacity: 1;"><img alt="" role="presentation" src="//b.tile.openstreetmap.org/10/297/388.png" class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; backface-visibility: hidden; transform: translate3d(-111px, 251px, 0px); opacity: 1;"><img alt="" role="presentation" src="//a.tile.openstreetmap.org/10/299/388.png" class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; backface-visibility: hidden; transform: translate3d(401px, 251px, 0px); opacity: 1;"></div></div></div><div class="leaflet-pane leaflet-shadow-pane"></div><div class="leaflet-pane leaflet-overlay-pane"></div><div class="leaflet-pane leaflet-marker-pane"><img src="http://dev.coosguide.com/dev1/wp-content/uploads/2021/03/Restaurants.png" class="leaflet-marker-icon leaflet-zoom-animated leaflet-interactive" title="Village Whiskey" alt="" tabindex="0" style="margin-left: -17px; margin-top: -45px; width: 36px; height: 45px; transform: translate3d(246px, 273px, 0px); z-index: 273;"><img src="http://dev.coosguide.com/dev1/wp-content/uploads/2021/03/Restaurants.png" class="leaflet-marker-icon leaflet-zoom-animated leaflet-interactive" title="Zavino Pizzeria and Wine Bar" alt="" tabindex="0" style="margin-left: -17px; margin-top: -45px; width: 36px; height: 45px; transform: translate3d(245px, 52px, 0px); z-index: 52;"><img src="http://dev.coosguide.com/dev1/wp-content/uploads/2021/03/Restaurants.png" class="leaflet-marker-icon leaflet-zoom-animated leaflet-interactive" title="Parc" alt="" tabindex="0" style="margin-left: -17px; margin-top: -45px; width: 36px; height: 45px; transform: translate3d(265px, 98px, 0px); z-index: 98;"><img src="http://dev.coosguide.com/dev1/wp-content/uploads/2021/03/Restaurants.png" class="leaflet-marker-icon leaflet-zoom-animated leaflet-interactive" title="Percy Street Barbecue" alt="" tabindex="0" style="margin-left: -17px; margin-top: -45px; width: 36px; height: 45px; transform: translate3d(146px, 140px, 0px); z-index: 140;"><img src="http://dev.coosguide.com/dev1/wp-content/uploads/2021/03/Restaurants.png" class="leaflet-marker-icon leaflet-zoom-animated leaflet-interactive" title="The Fountain Restaurant" alt="" tabindex="0" style="margin-left: -17px; margin-top: -45px; width: 36px; height: 45px; transform: translate3d(227px, 184px, 0px); z-index: 184;"><img src="http://dev.coosguide.com/dev1/wp-content/uploads/2021/03/Restaurants.png" class="leaflet-marker-icon leaflet-zoom-animated leaflet-interactive" title="Lacroix at The Rittenhouse" alt="" tabindex="0" style="margin-left: -17px; margin-top: -45px; width: 36px; height: 45px; transform: translate3d(224px, 128px, 0px); z-index: 128;"><img src="http://dev.coosguide.com/dev1/wp-content/uploads/2021/03/Restaurants.png" class="leaflet-marker-icon leaflet-zoom-animated leaflet-interactive" title="The Rittenhouse" alt="" tabindex="0" style="margin-left: -17px; margin-top: -45px; width: 36px; height: 45px; transform: translate3d(203px, 170px, 0px); z-index: 170;"><img src="http://dev.coosguide.com/dev1/wp-content/uploads/2021/03/Restaurants.png" class="leaflet-marker-icon leaflet-zoom-animated leaflet-interactive" title="Sampan" alt="" tabindex="0" style="margin-left: -17px; margin-top: -45px; width: 36px; height: 45px; transform: translate3d(158px, 223px, 0px); z-index: 223;"><img src="http://dev.coosguide.com/dev1/wp-content/uploads/2021/03/Restaurants.png" class="leaflet-marker-icon leaflet-zoom-animated leaflet-interactive" title="Morimoto" alt="" tabindex="0" style="margin-left: -17px; margin-top: -45px; width: 36px; height: 45px; transform: translate3d(212px, 182px, 0px); z-index: 182;"><img src="http://dev.coosguide.com/dev1/wp-content/uploads/2021/03/Restaurants.png" class="leaflet-marker-icon leaflet-zoom-animated leaflet-interactive" title="Buddakan" alt="" tabindex="0" style="margin-left: -17px; margin-top: -45px; width: 36px; height: 45px; transform: translate3d(220px, 213px, 0px); z-index: 213;"></div><div class="leaflet-pane leaflet-tooltip-pane"></div><div class="leaflet-pane leaflet-popup-pane"></div><div class="leaflet-proxy leaflet-zoom-animated" style="transform: translate3d(76348.4px, 99239.5px, 0px) scale(512);"></div></div><div class="leaflet-control-container"><div class="leaflet-top leaflet-left"><div class="leaflet-control-zoom leaflet-bar leaflet-control"><a class="leaflet-control-zoom-in" href="#" title="Zoom in" role="button" aria-label="Zoom in">+</a><a class="leaflet-control-zoom-out" href="#" title="Zoom out" role="button" aria-label="Zoom out">−</a></div></div><div class="leaflet-top leaflet-right"></div><div class="leaflet-bottom leaflet-left"></div><div class="leaflet-bottom leaflet-right"><div class="leaflet-control-attribution leaflet-control"><a href="https://leafletjs.com" title="A JS library for interactive maps">Leaflet</a> | Map data © <a href="https://openstreetmap.org/copyright">OpenStreetMap</a> contributors</div></div></div></div>
							<div id="gd_map_canvas_archive_loading_div" class="loading_div overlay overlay-black position-absolute row m-0" style="height: 325px; width: 100%; top: 0px; z-index: 2; display: none;">
								<div class="spinner-border mx-auto align-self-center text-white" role="status">
									<span class="sr-only">Loading...</span>
								</div>
							</div>
							<div id="gd_map_canvas_archive_map_nofound" class="advmap_nofound position-absolute row m-0 z-index-1" style="display:none;transform: translate(-50%, -50%);top:50%;left:50%;opacity: .85;pointer-events: none;">
								<div class="alert alert-info text-center mx-auto align-self-center shadow-lg mb-0">
									<div class="h3 alert-heading">No Records Found</div><p> Sorry, no records were found. Please adjust your search criteria and try again.</p>								</div>
							</div>
							<div id="gd_map_canvas_archive_map_notloaded" class="advmap_notloaded position-absolute row m-0 z-index-1" style="display:none;transform: translate(-50%, -50%);top:50%;left:50%;opacity: .85;pointer-events: none;">
								<div class="alert alert-danger text-center mx-auto align-self-center shadow-lg mb-0">
									<div class="h3 alert-heading">Maps failed to load</div><p> Sorry, unable to load the Maps API.</p>								</div>
							</div>
						</div>
					</div>
					<div class="gd_map_canvas_archive_BottomLeft BottomLeft"></div>
				</div>
			</div><!--END map_background-->
					</div>
		<script type="text/javascript">
jQuery(function ($) {
				var gdMapCanvas = 'gd_map_canvas_archive';
			build_map_ajax_search_param(gdMapCanvas, false);												var screenH, heightVH, ptypeH = 0;
			screenH = $(window).height();
			heightVH = parseFloat('325');
			if ($("#" + gdMapCanvas + "_posttype_menu").length) {
				ptypeH = $("#" + gdMapCanvas + "_posttype_menu").outerHeight();
			}
			$("#" + gdMapCanvas + "_cat").css("max-height", heightVH - ptypeH + 'px');
			});
</script>
			</div><!--END stick_trigger_container-->
</div><!--END geodir-map-wrap-->
<style>
	body.stickymap_hide .stickymap{ display: none !important;}
	body.stickymap_hide .stick_trigger_container .fa-angle-right{ transform: rotate(180deg);}

	/* fullscreen map */
	body.body_fullscreen > .stick_trigger_container{width: 100vw;
		height: 100vh;
		position: fixed;
		z-index: 50000;}

</style>
</div></div>
</div></div>

PaulOB · March 20, 2021, 1:27pm

It’s a hard to be specific without a full working example but what happens if you hide the whole block that follows the button?

e.g.

wp-block-geodirectory-geodir-widget-map

https://codepen.io/paulobrien/pen/rNWXwBw

Reduce window size to 767px to allow map button to show.

Codeman · March 20, 2021, 4:01pm

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial, Helvetica, sans-serif;}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
</style>
</head>
<body>

<h2>Modal Example</h2>

<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>

<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>
<iframe
  id="google-maps"
  loading="lazy"
  allowfullscreen
  src="https://www.google.com/maps/embed/v1/place?key=YOUR_API_KEY&q=Mainz">
</iframe>
  </div>

</div>

<script>
// Get the modal
var modal = document.getElementById("myModal");

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal 
btn.onclick = function() {
  modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
</script>

</body>
</html>

system · June 19, 2021, 11:02pm

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.