Search code examples
javascriptjquerycssgoogle-mapsumbraco7

How to override relative positioning on Google Map

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" 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>

Solution

  • 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