Ionic 2 native google maps multiple markers

Ionic Framework ionic-v3
1

hey, tried to implement the example ‘create multiple markers’ from the cordova-plugin-googlemaps plugin and its not working at all. Anybody know what the reason could be? Thanks

var data = [
  {'title': 'marker1', 'position': GoogleMapsLatLng(0, 0)},
  {'title': 'marker2', 'position': GoogleMapsLatLng(1, 1)},
  {'title': 'markerN', 'position': GoogleMapsLatLng(2, 2)}
];

addMarkers(data, function(markers) {
  markers[markers.length - 1].showInfoWindow();
});

function addMarkers(data, callback) {
  var markers = [];
  function onMarkerAdded(marker) {
    markers.push(marker);
    if (markers.length === data.length) {
      callback(markers);
    }
  }
  data.forEach(function(markerOptions) {
    map.addMarker(markerOptions, onMarkerAdded);
  });
}
1 Like
2

Are you found any solution for your problem, i have the same issue ?

3 
addMarkers(places, function(markers) { });

function addMarkers(data, callback) {
    function onMarkerAdded(marker) { console.log(marker); }
    
    for (let index in places) {

        // End of marker conditions
        let place = places[index];
        place['markerIndex'] = parseInt(index);
        points.push(new GoogleMapsLatLng(place['lat'], place['lng']));

        myMap.addMarker({
            'position': new GoogleMapsLatLng(place['lat'], place['lng']),
            'place_id': index,
            'icon': {
                'url': iconsType[place.type],
                'anchor': [18, 36],
                'size': {
                    width: 36,
                    height: 36
                 }
            },
            'place': place,
            'visible': markerVisible,
            'markerClick': function(marker) {
                markerClicked.emit(marker.get('place'));
             }
        }, onMarkerAdded);

    }
    
}
4

Thank you but it doesn’t work with me if you please can post a snippet for your full code that create the map.
btw i’m using GoogleMap class from ionic-native.

5

can you please elaborate what changes you made in contrast to original ionic2 code?

6

is anyone still having problems here? @dboras

7

This code is working perfectly

loadMap() {
let points: any[] = [
{lat: 33.91636924837674, lng: -118.39605331420898,title : “1”},
{lat: 33.90205144970967, lng: -118.39639663696288,title : “2”},
{lat: 33.90190897196702, lng: -118.37905883789062,title : “3”},
{lat: 33.89471353635718, lng: -118.3787155151367,title : “4”}
];

this.map = GoogleMaps.create('map_canvas',{
  camera: {
    target: points,
    zoom : 18
  }
})
this.map.one(GoogleMapsEvent.MAP_READY).then(() => {
  let baseArray: BaseArrayClass<any> = new BaseArrayClass(points);
  baseArray.forEach((position : any,idx:number)=>{
    console.log(position.title);
    let marker: Marker = this.map.addMarkerSync({
     position : position,
     icon : 'red',
     title : position.title,
     animation : GoogleMapsAnimation.BOUNCE,
   })
   marker.on(GoogleMapsEvent.MARKER_CLICK).subscribe(()=>{        
     marker.showInfoWindow();
   });
  })   
})

}

Happy code…