Home/ Questions/Q 8888137
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T21:58:11+00:00

I’ve got the following typescript class that produces a google map instance. I’m new

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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);
}
    • 0