Help with Ionic Maps Native


#1

Hi,

I’m having trouble to show new markers on my map after loading them from a website.
When a create markerCustom it’s being defined with Lat & Lng = 0.

Can someone help me?

map.on(GoogleMapsEvent.CAMERA_IDLE).subscribe(
      (event) => {
        //carregar os pinos quando o zoom for no minimo 29, com uma distancia de 50 metros de raio
        console.log('Zoom => '+event.zoom +'\n Lat:'+event.target.lat+'Lng:'+event.target.lng);

        this.http.get('http://smartcampus.mariojr.com.br/api/maps/nearme?lat='+event.target.lat+'&lng='+event.target.lng)
          .map((res) => res.json())
          .subscribe(data => {
            for(let marker of data.servicos) {
              var lat = this.convertStringToNumber(marker.latitude);
              var lng = this.convertStringToNumber(marker.longitude);
              if (!this.markerExists(lat, lng)) {
                let markerCustom = new GoogleMapsMarker({
                    position: new GoogleMapsLatLng(lat,lng),
                    title: marker.nome,
                    label: marker.comodo_nome,
                    // animation: GoogleMapsAnimation.DROP
                });
                map.addMarker(markerCustom);
                console.log(markerCustom);
                  
                let markerData = {
                  lat: lat,
                  lng: lng,
                  marker: markerCustom
                };
  
                this.markerCache.push(markerData);

                this.bounds.extend(new GoogleMapsLatLng(lat,lng));
              }
            }

            map.refreshLayout();
          });
      });
  }

#2

What libraries exactly are you working with?


#3

that all i’ve imported in my app.js

import { Component} from '@angular/core';
import { NavController, NavParams, Platform } from 'ionic-angular';
import {GoogleMap,
  GoogleMapsEvent,
  GoogleMapsLatLng,
  GoogleMapsMarker,
  GoogleMapsAnimation,
  GoogleMapsLatLngBounds,
  GoogleMapsMarkerOptions,
  Geolocation} from 'ionic-native';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

bellow is my package.json

{
  "name": "smartcampusapp",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "dependencies": {
    "@angular/common": "2.4.8",
    "@angular/compiler": "2.4.8",
    "@angular/compiler-cli": "2.4.8",
    "@angular/core": "2.4.8",
    "@angular/forms": "2.4.8",
    "@angular/http": "2.4.8",
    "@angular/platform-browser": "2.4.8",
    "@angular/platform-browser-dynamic": "2.4.8",
    "@angular/platform-server": "2.4.8",
    "@ionic-native/core": "3.1.0",
    "@ionic-native/splash-screen": "3.1.0",
    "@ionic-native/status-bar": "3.1.0",
    "@ionic/storage": "2.0.0",
    "@types/google-maps": "^3.2.0",
    "ionic-angular": "2.3.0",
    "ionic-native": "^2.9.0",
    "ionicons": "3.0.0",
    "rxjs": "5.0.1",
    "sw-toolbox": "3.4.0",
    "zone.js": "0.7.2"
  },
  "devDependencies": {
    "@ionic/app-scripts": "1.1.4",
    "typescript": "2.0.9"
  },
  "cordovaPlugins": [
    "cordova-plugin-whitelist",
    "cordova-plugin-device",
    "cordova-plugin-console",
    "cordova-plugin-statusbar",
    "cordova-plugin-splashscreen",
    "ionic-plugin-keyboard",
    "cordova-plugin-network-information",
    "cordova-plugin-geolocation",
    "cordova-plugin-compat",
    "cordova-plugin-googlemaps",
    {
      "locator": "https://github.com/mapsplugin/cordova-plugin-googlemaps-sdk",
      "id": "com.googlemaps.ios"
    },
    "cordova-plugin-x-toast",
    "cordova-plugin-dialogs"
  ],
  "cordovaPlatforms": [
    "ios",
    {
      "platform": "ios",
      "version": "",
      "locator": "ios"
    },
    {
      "platform": "android",
      "version": "",
      "locator": "android"
    }
  ],
  "description": "smartcampus: maps"
}

#4

If you don’t get any better answers, I would try investigating whether upgrading dependencies to the latest supported versions makes a difference.


#5

Yep, especially the both versions of Ionic Native could cause problems:

vs.