0

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>

Alistair67
  • 59
  • 11
  • I can't imagine why relative positioning would stop the map from displaying. Could you create a [MCVE] showing the issue? – Turnip May 04 '18 at 09:30
  • [height](https://www.w3.org/TR/CSS2/visudet.html#the-height-property). Short answer: replace `height: 100%` with `height: 100vh` or px you want. See more at [here](https://stackoverflow.com/questions/7880365/why-does-100-not-mean-100-height) – Hikarunomemory May 04 '18 at 10:48
  • @Hikarunomemory - that worked! Thank you. Can you post as an answer so I can accept? – Alistair67 May 04 '18 at 11:08

2 Answers2

1

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

Hikarunomemory
  • 4,237
  • 2
  • 11
  • 21
0

You can use any position in your map DIV,, but you should first give a different position to your parent DIV, example: 

#parentDIV {
 position: relative;
}
#map_canvas {
 position: absolute
}
Mohcin Bounouara
  • 593
  • 4
  • 18
  • Not sure how this is relevant. I can't give any positioning to my div, it is being determined for me by the google code. I have tried putting another div around the `#map_canvas' div and changing the positioning on that but that doesn't help. – Alistair67 May 04 '18 at 09:35