How To Override Relative Positioning On Google Map

04 May 2018 - 1 answer

I have tried to add a Google Map to my Umbraco site using the code below. The Div #map_canvas gets relative positioning from the api and as such doesn't display on the page. If I manually override this in the inspector with static positioning the map appears, but I have tried in various ways to permanently override this, using suggestions found elsewhere on Stack Overflow, but have had no success. Can anyone suggest a way to do this?

EDIT: Turnip, this is as close as I can get, given that the page inherits some Umbraco code and is displaying in Umbraco's preview window, but I assume that the problem wouldn't be there anyway.

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage<ContentModels.MasterTemplate2>
@using ContentModels = Umbraco.Web.PublishedContentModels;
@{
Layout = null;
}<!DOCTYPE html>

<html>
<head>
    <title>"testpage"</title>

<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />

<link rel="stylesheet" type="text/css" target="_blank" rel="nofollow noreferrer" href="/css/wsha-style.css">

<script src="~/umbraco/lib/jquery/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAbVhWKXQ2uj-n0lX1JsZh_DqG9RI-XDhE"></script>

</head>

<body>


<div id="map_canvas" style="height:100%;"></div>



<script>
$(document).ready(function () {

    var map_position = new google.maps.LatLng(55.8735958,-4.3387407)

    var map = new google.maps.Map(document.getElementById("map_canvas"), {
        center: map_position,
        zoom: 3
    });

    var marker = new google.maps.Marker({
        position: map_position,
        map: map,
        title: 'Marker'
    });

});


</script>

</body>

Answer

Short answer: replace height: 100% with height: 100vh or px you want.

The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'.

See more at here

For further reading: the height property from W3C recommendation

source: stackoverflow.com

← Previous Post

How To Override Relative Positioning On Google Map

04 May 2018 - 1 answer

Answer

Related Questions