Google Map generated from typescript / javascript showing as grey box

Question

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) {
            this.name = "GoogleMap";
            this.options = {center: new google.maps.LatLng(53.83305, -1.66412), zoom: 3, MapTypeId: 'terrian' };
            this.map = new google.maps.Map(mapDiv, this.options);
        }
    }
}

and in my view, I have the following ;

<!DOCTYPE html>
<html>
    <head><title>TypeScript Mapping</title></head>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=MyKEYGOESHERE&sensor=false"></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");
                Mapping.GoogleMap(mapCanvas);
            }
        </script>
    <body onload="initialize()">
    <div id="map" style="height: 512px; width: 512px;"></div>
  </body>
</html>

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.

Answer 1

Just to echo the finding from the comments:

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

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

Answer 2

Answer:

Google's MapTypeId is an constant so you can directly go for the property here like:

google.maps.MapTypeId.CONSTANT

Currently they support 4 Types:

Constant    - Description
HYBRID      - Displays a photographic map + roads and city names
ROADMAP     - Displays a normal, default 2D map
SATELLITE   - Displays a photographic map
TERRAIN     - Displays a map with mountains, rivers, etc.

Addon:

I've created a short Demo Application in TypeScript for a Google Maps in an TypeScript Application/Page:

https://github.com/DominikAngerer/typescript-google-maps

It currently support:

Default Google Maps
SnazzyMap Support (simply replace your SnazzyMap with the one I configured in the SnazzyMaps.ts)
Default Center Object
Free Geo IP Location (10.000 Request per Hour)
New Default Icon /images/icon.png
New Default Icon as .PSD /images/icon.psd
No jQuery Needed
Generated Test Data from Json-Generator.com
InfoBox JS Plugin
Infobox Example
Template example for InfoBoxes
Full bower support

On the todo is also typings support, so issue's as you got there shouldn't happen again.

Google Map generated from typescript / javascript showing as grey box

Question

2 answers

solution1
1 ACCPTED 2012-11-20 16:06:59

solution2
0 2016-05-30 21:28:02

Google Map generated from typescript / javascript showing as grey box

Question

2 answers

solution1 1 ACCPTED 2012-11-20 16:06:59

solution2 0 2016-05-30 21:28:02

solution1
1 ACCPTED 2012-11-20 16:06:59

solution2
0 2016-05-30 21:28:02