Angular 2 Google Map with Multiple Markers

Question

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

Hope this link will help you http://stackoverflow.com/questions/3059044/google-maps-js-api-v3-simple-multiple-marker-example — Anil Samal, Mar 07 '17 at 06:50
try this.. http://stackoverflow.com/questions/41628000/facing-difficulty-with-angular-2-google-map — raj m, Mar 07 '17 at 08:31

score 2 · Answer 1 · edited Feb 15 '19 at 09:52

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>

score 0 · Accepted Answer · answered Mar 07 '17 at 07:10

0

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

answered Mar 07 '17 at 07:10

Suraj Rao

29,388
11
94
103

you can call the same `new Marker` with different `position` and `title` values on the same map..have a function which creates markers and call whenever you need. – Suraj Rao Mar 07 '17 at 07:22
@suraj Hi, do you know how to add infowindow to markers with their allocated content? [link](https://stackoverflow.com/questions/45252867/ionic-2-angular-2-adding-array-of-markers-with-infowindow-on-google-map) – aaa Jul 23 '17 at 05:42

Angular 2 Google Map with Multiple Markers

2 Answers2