Multiple markers on Google Map with ionic 3

Question

I'm trying to get several markers on a simple google map. I'm using Ionic 3 which use Angular 4.

I'm loading the map like this :

import { Component, ViewChild, ElementRef } from '@angular/core';
import { GoogleMaps } from '@ionic-native/google-maps';

declare var google;

export class SearchResultsPage extends BasePage {

@ViewChild('map') mapElement: ElementRef;
private map: any;

constructor(public navCtrl: NavController, 
            public navParams: NavParams, 
            private translateService: TranslateService,
            private googleMaps: GoogleMaps) {}


  ionViewDidLoad() {
   setTimeout(()=>{
      this.loadMap();
   }, 1000)
  }

  loadMap() {
    let latLng = new google.maps.LatLng(48.8509695, 2.3861870000000636);
    let latLng2 = new google.maps.LatLng(48.8504541, 2.3865487000000485);

    let mapOptions = {
        center: latLng,
        zoom: 15,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);    

    var marker = new google.maps.Marker({    
        position: latLng,
        map: this.map,
        title: 'Hello World!'
    },{
        position: latLng2,
        map: this.map,
        title: 'Check the World!'
    });
}

I found this (but doesn't work)

addMarkers(data, callback) {
    var markers = [{
        'position': {
            lat: 48.8513735,
            lng: 2.3861292
        },
        'icon': '#ff0000'
        }];
    function onMarkerAdded(marker) {
        console.log(marker);
        markers.push(marker);

        if (markers.length === data.length) {
            callback(markers);
        } else {
            console.log('in the else');
        }
    }

    data.forEach(function(markerOptions) {
        console.log('in foreach');
        this.map.addMarker(markerOptions, onMarkerAdded);
    });
}

The map is showing, but I don't succeed to add markers.
I tried to follow the official doc (v1 and v2) but it doesn't work. If someone has an idea, thanks by advance. I saw lot of people who try to do the same thing, but every codes are differents..

What is the problem? The map doesn't show or you can't add markers? If the map doesn't show have you set the proper styles for the div which will contain the map? — eNVy, Jul 27 '17 at 15:15
Sorry I edited my question. The map is showing but I can't succeed to display markers — Nitneq, Jul 27 '17 at 15:21
The code you have attached does not have anything in it that would load markers. Could you add that in as well so we can see what is going on. — eNVy, Jul 27 '17 at 15:23
Yes because what I tried didn't work. I'll edit the question in 2 minutes. — Nitneq, Jul 27 '17 at 15:26
Were you able to add a single marker as I mentioned in the answer? — eNVy, Jul 27 '17 at 15:45
Hi @ Pouloulou, i too have same requirement of displaying multiple markers in google map of ionic page. i followed your code and answer but not getting desired output. can you please help me with your source as iam newbie to the ionic, thank you — Shaik, Sep 17 '19 at 10:03
Sorry but It was an old project for my old job, I don't have access to this project anymore :/ — Nitneq, Sep 17 '19 at 10:30
hi @Pouloulou, i just asked a question in stackoverflow. https://stackoverflow.com/questions/57985967/adding-multiple-markers-in-ionic-google-map please suggest me on this where iam going wrong, thank you — Shaik, Sep 18 '19 at 06:01

eNVy · Accepted Answer · 2017-07-27T16:11:09.990

6

loadMap() {
let latLng = new google.maps.LatLng(48.8513735, 2.3861292);

let mapOptions = {
  center: latLng,
  zoom: 15,
  mapTypeId: google.maps.MapTypeId.ROADMAP
}

this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);    

var locations = [
  ['Bondi Beach', -33.890542, 151.274856, 4],
  ['Coogee Beach', -33.923036, 151.259052, 5],
  ['Cronulla Beach', -34.028249, 151.157507, 3],
  ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
  ['Maroubra Beach', -33.950198, 151.259302, 1]
];

var infowindow = new google.maps.InfoWindow();

var marker, i;

for (i = 0; i < locations.length; i++) {  
  marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    map: map
  });

  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      infowindow.setContent(locations[i][0]);
      infowindow.open(map, marker);
    }
  })(marker, i));
}
}

edited Jul 27 '17 at 16:11

answered Jul 27 '17 at 15:41

eNVy

487
3
10

Thanks for your answer. It works perfectly, but when I add another marker, it doesn't seem to be there. The two markers are supposed to be in the same street. I'm going to update the code to show you how I did it. – Nitneq Jul 27 '17 at 15:51
You can't create multiple markers in a single call. Have a look at this answer for sample code to create multiple markers. And please mark my answer as the answer if it has helped you. Thanks. https://stackoverflow.com/questions/3059044/google-maps-js-api-v3-simple-multiple-marker-example – eNVy Jul 27 '17 at 16:01
I have updated the answer so that multiple markers may be added. – eNVy Jul 27 '17 at 16:12
But why downvoting the question ? – Nitneq Jul 28 '17 at 09:14
hi @Pouloulou and eNVy, i just asked a question in stackoverflow. stackoverflow.com/questions/57985967/… please suggest me on this where iam going wrong, thank you – Shaik Sep 19 '19 at 11:28

Multiple markers on Google Map with ionic 3

1 Answers1