CODEWITHSUNDEEP
google-mapsangulartypescript
sridharan
sridharan

Reputation: 2065

Angular 2 Google Map with Multiple Markers

I'm currently developing an Angular2 project which using Google Maps.

I'm trying to display the markers and multiple markers around the area. I've got the map working but can't seem to marker.

<div class="google-maps"></div>



constructor(private _elementRef:ElementRef) {
  }
  ngAfterViewInit() {
    let el = this._elementRef.nativeElement.querySelector('.google-maps');
    GoogleMapsLoader.load((google) => {
      let myLatlng = new google.maps.LatLng(44.5403,-78.5463);
      new google.maps.Map(el, {
        center: new google.maps.LatLng(44.5403, -78.5463),
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.ROADMAP

      });
      new google.maps.Marker(el,{ 
        draggable: true,
        animation: google.maps.Animation.DROP,
          position: myLatlng,
            title:"Hello World!"
          });
        }); 
  }

Upvotes: 4

Views: 5921

Answers (2)

Md.Shahjalal
Md.Shahjalal

Reputation: 413

Try this code this work my project

Google Official Doc here

import  GoogleMapsLoader  from 'google-maps';
import  { google } from 'google-maps';

ngAfterViewInit() {

let el = this._elementRef.nativeElement.querySelector('.contact-us');

GoogleMapsLoader.KEY = 'g4554645645645645645646';

GoogleMapsLoader.load((google) => {

let myLatlng = new google.maps.LatLng(23.5454, 90.8785);

let map =  new google.maps.Map(el, {

    center: new google.maps.LatLng(23.8787878, 90.87878),

    zoom: 18,

    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

let marker =  new google.maps.Marker({ 
      draggable: true,
      animation: google.maps.Animation.DROP,
      position: myLatlng,
      map: map,
      title:"Hello World!"
    });

});

Template.html

 <div class="contact-us" style="position: relative; height: 470px;"></div>

Upvotes: 2

Suraj Rao
Suraj Rao

Reputation: 29614

The marker function doesnt seem to match the official docs here.

 let map = new google.maps.Map(el, {
        center: new google.maps.LatLng(44.5403, -78.5463),
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.ROADMAP

      });
 let marker = new google.maps.Marker({ 
        draggable: true,
        animation: google.maps.Animation.DROP,
          position: myLatlng,
          map: map,//set map created here
            title:"Hello World!"
          });

Upvotes: 0

Related Questions