Menu
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.
380
Creating a MapUse Map type and new keyword to create a map in TypeScript. let myMap = new Map<string, number>(); To create a Map with initial key-value pairs, pass the key-value pairs as an array to the Map constructor.
Create a mapOn your computer, sign in to My Maps. Click Create a new map. Go to the top left and click "Untitled map." Give your map a name and description.
Google is using TypeScript and Angular on TypeScript for its famous products such as Google Analytics, Firebase, and Google Cloud Platform including its critical internal tools - bug tracking, employee reviews, and product approval and launch tools.
You won't be charged until your usage exceeds $200 in a month. Note that the Maps Embed API, Maps SDK for Android, and Maps SDK for iOS currently have no usage limits and are at no charge (usage of the API or SDKs is not applied against your $200 monthly credit).
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".
147
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
