Streaming live at 10am (PST)

How to make Window.matchMedia hide a map


#1

Hi there,

On a previous topic about multiple maps (one for desktop and one for mobile) I was informed the reason the map on mobile was sooo slow is because I wasn’t using Window.matchMedia to hide the desktop map and stop two versions of the code running.

I’ve managed to get it working with background colour but wondering how I get it to work with the mobile and desktop maps (e.g it stops the desktop script running at the same time as the mobile one so the mobile map actually loads properly)

Here’s the code I’m using and the project I have it implemented on.

<!--- Window.matchMedia Script --->

<script>

	function myFunction(x) {

   	if (x.matches) { // If media query matches

   document.body.style.backgroundColor = "#ff5353";

   } else {

   document.body.style.backgroundColor = "#ad00ff";

   }

		}

		var x = window.matchMedia("(max-width: 1500px)")

			myFunction(x) // Call listener function at run time

				x.addListener(myFunction) // Attach listener function on state changes

</script>

<!--- Gmap Script --->

  <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDrZsRiUQsKc-7JNL8VvBgRsmS0FBDbJ3Q&callback=initMap"
  type="text/javascript"></script>

<script type="text/javascript">
var geocoder;
var map;
var address = "Bideford,Devon";

function initMap() {
  geocoder = new google.maps.Geocoder();
  var latlng = new google.maps.LatLng(-34.397, 150.644);
  var myOptions = {
zoom: 12,
center: latlng,
mapTypeControl: false,
zoomControl: true,
disableDoubleClickZoom: true,
scaleControl: false,
scrollwheel: true,
panControl: false,
streetViewControl: false,
draggable : true,
overviewMapControl: false,
mapTypeControlOptions: {
  styles: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
navigationControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles:[
{
    "featureType": "all",
    "elementType": "labels.text.fill",
    "stylers": [
        {
            "saturation": 36
        },
        {
            "color": "#c9bd88"
        },
        {
            "lightness": 40
        },
        {
            "visibility": "on"
        }
    ]
},
{
    "featureType": "all",
    "elementType": "labels.text.stroke",
    "stylers": [
        {
            "visibility": "on"
        },
        {
            "color": "#000000"
        },
        {
            "lightness": 16
        }
    ]
},
{
    "featureType": "all",
    "elementType": "labels.icon",
    "stylers": [
        {
            "visibility": "off"
        }
    ]
},
{
    "featureType": "administrative",
    "elementType": "geometry.fill",
    "stylers": [
        {
            "color": "#000000"
        },
        {
            "lightness": 20
        }
    ]
},
{
    "featureType": "administrative",
    "elementType": "geometry.stroke",
    "stylers": [
        {
            "color": "#000000"
        },
        {
            "lightness": 17
        },
        {
            "weight": 1.2
        }
    ]
},
{
    "featureType": "landscape",
    "elementType": "geometry",
    "stylers": [
        {
            "color": "#000000"
        },
        {
            "lightness": 20
        }
    ]
},
{
    "featureType": "poi",
    "elementType": "geometry",
    "stylers": [
        {
            "color": "#000000"
        },
        {
            "lightness": 21
        }
    ]
},
{
    "featureType": "road.highway",
    "elementType": "geometry.fill",
    "stylers": [
        {
            "color": "#000000"
        },
        {
            "lightness": 17
        }
    ]
},
{
    "featureType": "road.highway",
    "elementType": "geometry.stroke",
    "stylers": [
        {
            "color": "#000000"
        },
        {
            "lightness": 29
        },
        {
            "weight": 0.2
        }
    ]
},
{
    "featureType": "road.arterial",
    "elementType": "geometry",
    "stylers": [
        {
            "color": "#000000"
        },
        {
            "lightness": 18
        }
    ]
},
{
    "featureType": "road.local",
    "elementType": "geometry",
    "stylers": [
        {
            "color": "#000000"
        },
        {
            "lightness": 16
        }
    ]
},
{
    "featureType": "transit",
    "elementType": "geometry",
    "stylers": [
        {
            "color": "#000000"
        },
        {
            "lightness": 19
        }
    ]
},
{
    "featureType": "water",
    "elementType": "geometry",
    "stylers": [
        {
            "color": "#000000"
        },
        {
            "lightness": 17
        }
    ]
}
]
  };
  map = new google.maps.Map(document.getElementById("map"), myOptions);
  map2 = new google.maps.Map(document.getElementById("map2"), myOptions);
  if (geocoder) {
geocoder.geocode({
  'address': address
}, function(results, status) {
  if (status == google.maps.GeocoderStatus.OK) {
    if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
      map.setCenter(results[0].geometry.location);
      map2.setCenter(results[0].geometry.location);

      var infowindow = new google.maps.InfoWindow({
        content: '<b>' + address + '</b>',
        size: new google.maps.Size(150, 50)
      });

      var iconBase = 'https://daks2k3a4ib2z.cloudfront.net/597f0a54250f3500013ebc97/5992e4b5e91d6100019b55c5_'
      var marker = new google.maps.Marker({
        position: results[0].geometry.location,
        map: map,
        title: address,
        icon: iconBase + 'gmap_icon_bg.png',
      });
      google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map, marker);
      });
      
      var iconBase2 = 'https://daks2k3a4ib2z.cloudfront.net/597f0a54250f3500013ebc97/5992e4b5e91d6100019b55c5_'
      var marker2 = new google.maps.Marker({
        position: results[0].geometry.location,
        map: map2,
        title: address,
        icon: iconBase + 'gmap_icon_bg.png',
      });
      google.maps.event.addListener(marker2, 'click', function() {
        infowindow.open(map2, marker2);
      });

    } else {
      alert("No results found");
    }
  } else {
    alert("Geocode was not successful for the following reason: " + status);
  }
});
  }
}
//google.maps.event.addDomListener(window, 'load', initialize);

   </script>

Thanks in advance,
Jamie


My preview link: https://preview.webflow.com/preview/b-m-testing?preview=8bcd294ef54635bee2c191d537f23fc9


#2

@art_ytc any tutorials or videos you could link me to to help with this issue?

This is the only error I’m getting when the map switches to mobile, the pin is on the map and you can move it around the terrain just won’t load :confused:

58


#3

Your request seems to be quite broad, and may not be easily answerable/solvable via the forums as it is not design-related. Would you like to move your post to the Freelance category instead?

Alternatively, you can also contact specialists in our Experts directory to custom code a solution for you.