Mark D Mark D - 4 months ago 37x
Javascript Question

Google Map generated from typescript / javascript showing as grey box

I've got the following typescript class that produces a google map instance. I'm new to javascript / typescript and HTML!

/// <reference path="./google.maps.d.ts" />
module Mapping {
export class GoogleMap implements IMap {

public name: string;
private map: any;
private options: any;

constructor (mapDiv: Element) { = "GoogleMap";
this.options = {center: new google.maps.LatLng(53.83305, -1.66412), zoom: 3, MapTypeId: 'terrian' }; = new google.maps.Map(mapDiv, this.options);

and in my view, I have the following ;

<!DOCTYPE html>
<head><title>TypeScript Mapping</title></head>
<script type="text/javascript" src=""></script>
<script type="text/javascript" src="~/scripts/require.js"></script>
<script type="text/javascript" src="~/typings/Mapping.js"></script>
<script type="text/javascript">
function initialize() {
var mapCanvas = document.getElementById("map");
<body onload="initialize()">
<div id="map" style="height: 512px; width: 512px;"></div>

All I get at runtime is a grey box, dragging inside this box changes the pointer to the hand pointer so it looks like the control has been created ok just not showing any maps details.

Anybody got any ideas?

Thanks in advance.


Just to echo the finding from the comments:

It looks like your map options are defined incorrectly. Try...

constructor (mapDiv: Element) { = "GoogleMap";
    this.options = {
        center: new google.maps.LatLng(53.83305, -1.66412),
        zoom: 3,
        MapTypeId: google.maps.MapTypeId.TERRAIN
    }; = new google.maps.Map(mapDiv, this.options);