Home/ Questions/Q 8854313
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T13:51:09+00:00

Hi I’m new to Typescript and Javascript and I’m having a few problems creating

  • 0

Hi I’m new to Typescript and Javascript and I’m having a few problems creating a googlemap instance.

I’ve downloaded the google.maps.d.ts declaration file and imported it to my typescript class like so, all the intellisense works fine etc.;

import googleMaps = module("google.maps"); 
module Mapping {
    export class GoogleMap implements IMap {

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

        constructor (mapDiv:Element) {
            this.name = "GoogleMap";
            this.options = { zoom: 3, MapTypeId: 'terrian' };
            this.map = new googleMaps.google.maps.Map(mapDiv, this.options);
         }
    }
}

When I try to create this class in my index.cshtml file ;

<!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");

            var googleMap = new Mapping.GoogleMap(mapCanvas);
        }
    </script>
<body onload="initialize()">
<div id="map" style="height: 512px; width: 512px;"></div>

I get the following error ;

Microsoft JScript runtime error: Module name “google.maps” has not been loaded yet for context: _. Use require([])

What am I missing in order to load the googlemaps api?

Thanks in advance.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    As you are including Google Maps as a script tag on your page, you probably don’t want to use a module-loader to load it in.

    So I would replace:

    import googleMaps = module("google.maps");

    With

    /// <reference path="./google.maps.d.ts" />

    The reference says to TypeScript “I will make sure this script is available at runtime”.

    The import statement says “Go and load this script for me at runtime”.

    • 0