Is there a way to adjust the width of a Google Maps template specifically for mobile mode? While it looks perfect on desktop, the map overflows the screen size on mobile.
See my code snippet below:
@section ('map')
<div id="map"></div>
<script>
function initMap() {
var uluru = {lat: 32.063256, lng: 34.776371};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 18,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyByM5NtgUPSOLQg_oX_7LgEwEX5XyYO3zI&callback=initMap">
</script>
@endsection
Check out my CSS styling for the map element:
#map {
height: 280px;
width: 500px;
}