如何使用带有角度的谷歌地图 2+

Question

I am new to angular and working on an old project with angular 2+.

As I am new I am having a hard time to find out how the map is working, if anyone please let me know that would be a great help.

          <input  places-auto-complete (place_changed)="placeChange($event)" 
          [types]="['all']"  class="search" 
          [(ngModel)]="place" placeholder="Search Place"/>

I am wondering how places-auto-complete is working i can't find out any class or module that is coming from and i would like to change its parameters like:

[types]="['all']" -> [types]="['address']"

I tried changing it but it's not working, so I would like to know its whole workflow.

Any help will be appreciated.

Thanks

Answer 1

Instead of relying on 3rd party libraries/modules to implement the map for you, you can load the script directly so that you can use the google map's official documentations . To do this, simply load the JS map script in the index.html.

Here is a working sample for your reference: https://stackblitz.com/edit/angular-map-with-marker-64255628

index.html

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
<my-app>loading</my-app>

style.css

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.map {
  height:100%;
}

map-with-marker.component.html

<div #map class="map"></div>

map-with-marker.component.ts

import { Component, OnInit, ViewChild } from "@angular/core";
declare const google: any;

@Component({
  selector: "my-maps",
  templateUrl: "./map-with-marker.component.html",
  styleUrls: ["./map-with-marker.component.css"]
})
export class MapComponent implements OnInit {
  @ViewChild("map", { static: true }) mapElement: any;
  map: any;

  constructor() {}

  ngOnInit() {
    var center = { lat: -33.8569, lng: 151.2152 };
    const mapProperties = {
      center: center,
      zoom: 11,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    this.map = new google.maps.Map(this.mapElement.nativeElement,mapProperties);
    var marker = new google.maps.Marker({ position: center, map: this.map });

    //adding markers by click
    this.map.addListener('click', (e) =>{
        //Determine the location where the user has clicked.
        this.addMarker(e.latLng);
    });
  }
  addMarker(latLng) {
    var marker = new google.maps.Marker({ position: latLng, map: this.map });
  }
}