"angular google maps" Code Answer's
You're definitely familiar with the best coding language Javascript that developers use to develop their projects and they get all their queries like "angular google maps" answered properly. Developers are finding an appropriate answer about angular google maps related to the Javascript coding language. By visiting this online portal developers get answers concerning Javascript codes question like angular google maps. Enter your desired code related query in the search bar and get every piece of information about Javascript code related question on angular google maps.
angular google maps
Step 1: Creating new project
Create a new project using command ng new gmaps-ng5
Step 2: Install Google Maps types for typescript support.
Run command npm install --save @types/googlemaps
Step 3: Link Google Maps JavaScript CDN inside index.html
<script src="http://maps.googleapis.com/maps/api/js"></script>
NOTE: Make sure you put your Google Map API Key here. You can get one from `https://developers.google.com/maps/documentation/javascript/get-api-key`. If not, after free usage, Google Map will start showing watermark.
With above steps, you are all set to start working with Google Maps (GMap).
Step 4: Next, let’s add a placeholder <div> for GMap
<div #gmap style="width:100%;height:400px"></div>
Step 5: Initialize GMap inside component
import { ViewChild } from '@angular/core';
import { } from '@types/googlemaps';
export class AppComponent {
@ViewChild('gmap') gmapElement: any;
map: google.maps.Map;
ngOnInit() {
var mapProp = {
center: new google.maps.LatLng(18.5793, 73.8143),
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
this.map = new google.maps.Map(this.gmapElement.nativeElement, mapProp);
}
}
Let’s break it down.
import { } from '@types/googlemaps';
First we shall import Google Maps types that we have installed in step 2. This is great help during development as you can work with strong types instead of vague any type. Apart from that, you shall also get intellisense if your IDE can understand type definition files.
Access <div #gmap>: gmapElement is a reference to <div #gmap> inside app.component.html file. ViewChild directive creates a direct link between <div> element and a gmapElement member variable.
ngOnInit(): Inside ngOnInit() life cycle hook, we shall create configuration object for GMap specifying default center, zoom level and map type. We shall pass this object to google.maps.Map constructor which shall return new Map object which we shall retain in member variable map for later access.
Running application:
Run application using ng serve and you should see Google Map inside browser. Congrats!! See, it was easy, told ya!
Perform Map operations
By default Google Map control shall render map as well as have few controls for changing zoom, full screen etc. You can access native Google Maps API via Angular.
Change Map type
<div class="col-md-3 col-sm-12 col-xs-12">
<button (click)="setMapType('terrain')" class="btn btn-primary">Terrain</button>
<button (click)="setMapType('satellite')" class="btn btn-danger">Satellite</button>
<button (click)="setMapType('roadmap')" class="btn btn-warning">Road Map</button>
</div>
setMapType(mapTypeId: string) {
this.map.setMapTypeId(mapTypeId)
}
We have map member variable inside our AppComponent class. Using this variable, we can call native GMap API for example, setMapTypeId. We have three buttons which pass map type ID to click handler to be passed to setMapTypeId function.
Navigate Map via Latitude and Longitude
Let’s create a HTML form for user to enter Latitude and Longitude.
<form class="form-inline" #form="ngForm" (ngSubmit)="setCenter($event)" ac>
<div class="form-group">
<input type="text" class="form-control" name="latitude" [(ngModel)]="latitude" placeholder="Enter latitude" required>
</div>
<div class="form-group">
<input type="text" class="form-control" name="longitude" [(ngModel)]="longitude" placeholder="Enter longitude" required>
</div>
<button type="submit" class="btn btn-primary" [disabled]="form.invalid">Go</button>
</form>
Once user submit the form by entering Latitude and Longitude, we shall call native setCenter GMap API. This function takes object of LatLng type hence we shall pass lat/long as a parameter to LatLng constructor.
Notice e.preventDefault() function call. It is to avoid refreshing complete page on form submit.
export class AppComponent {
latitude:number;
longitude:number;
setCenter(e:any){
e.preventDefault();
this.map.setCenter(new google.maps.LatLng(this.latitude, this.longitude));
}
}
All those coders who are working on the Javascript based application and are stuck on angular google maps can get a collection of related answers to their query. Programmers need to enter their query on angular google maps related to Javascript code and they'll get their ambiguities clear immediately. On our webpage, there are tutorials about angular google maps for the programmers working on Javascript code while coding their module. Coders are also allowed to rectify already present answers of angular google maps while working on the Javascript language code. Developers can add up suggestions if they deem fit any other answer relating to "angular google maps". Visit this developer's friendly online web community, CodeProZone, and get your queries like angular google maps resolved professionally and stay updated to the latest Javascript updates.