Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Import into ionic v3 #22

Open
wuilmerj24 opened this issue Aug 24, 2017 · 17 comments
Open

Import into ionic v3 #22

wuilmerj24 opened this issue Aug 24, 2017 · 17 comments

Comments

@wuilmerj24
Copy link

Hi, how can I import this library into ionic 3?
@HamzaLJ
Copy link

HamzaLJ commented Aug 27, 2017

Same here, I am stuck

@HamzaLJ
Copy link

HamzaLJ commented Aug 28, 2017

Anyone here knows how to fully implement this library in an Ionic 3 project?

@hectordav
Copy link

So do i, same issue

@hectordav
Copy link

In youtube there a video where implement this library, but It does not work for me.

https://www.youtube.com/watch?v=-pHQ_e3bZLY&list=PLIQQPtwzejqVguZj5DYrO1w0QbNSJWmT-&index=9

if somebody can do it please share.

@fernandogutierrez27
Copy link

fernandogutierrez27 commented Sep 27, 2017 •
edited

Hi, i followed this steps and it's working like a charm:

  1. Install the package:
    npm install marker-animate-unobtrusive

  2. Import it in the page where you want to use it (Just the page, it's NOT neccesary to import it on app.module.ts):

import SlidingMarker from "marker-animate-unobtrusive";
  1. Call to the SlidingMarker constructor instead of the google.maps.Marker constructor:
let marker = new SlidingMarker({
  map: this.map,
  position: new google.maps.LatLng(pos.latitude, pos.longitude),
  icon: iconName
});
  1. Set the update interval and the ease type (In this case my interval is 10 seconds, because is the minimun update interval that my gps devices let me set):
marker.setDuration(10000);
marker.setEasing('linear');
  1. When you receive new coords, update the marker position:
marker.setPosition(new google.maps.LatLng(pos.latitude, pos.longitude));

I hope this can help you.

@hectordav
Copy link

Hi Fernando Thanks a lot. I'll try and I will be informing

@hectordav
Copy link

Hi Again Fernando, its Working, you save my life. Thanks.

@MiguelHernandezCh
Copy link

Hello @fernandogutierrez27, I'm getting google is not defined. Can you help me?

@fernandogutierrez27
Copy link

fernandogutierrez27 commented Sep 29, 2017 •
edited

Hola @MiguelHernandezCh!

En mi caso particular, utilizo la librería de Google Maps Javascript API, para importarla agrego la siguiente línea dentro de la sección <body> (justo debajo de <ion-app></ion-app>), en el archivo index.html (que se encuentra en la carpeta /src) :

  <script src="https://maps.googleapis.com/maps/api/js?key=MI_API_KEY"></script>

El valor de MI_API_KEY, corresponde a tu clave de API, que puedes obtener en la sección credenciales de https://console.developers.google.com

Luego, en el archivo donde tengo mi página (o componente) declaro la variable google justo antes de @Component(...):

declare var google: any; // ESTA ES LA VARIABLE google QUE APARECE COMO NOT DEFINED

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})

Esto me permite utilizar la librería de Google Maps Javascript API en mi página/componente.

Solución 2:

En caso de que implementes Google Maps de manera diferente, te recomiendo cambiar esta línea:

position: new google.maps.LatLng(pos.latitude, pos.longitude),

por esto:

position: {lat: pos.latitude, lng: pos.longitude},

Y también cambiar esto:

marker.setPosition(new google.maps.LatLng(pos.latitude, pos.longitude));

por esto:

marker.setPosition({lat: pos.latitude, lng: pos.longitude});

donde pos.latitude y pos.longitude corresponden a vuestras coordenadas de latitud y longitud.

En definitiva, para configurar una posición en los mapas de Google, puedes hacerlo a través de un objeto LatLng, que pertenece a la propia librería de Google Maps, ó también puedes indicar tu propio objeto, que tenga los atributos lat y lng:

{
  lat: mivalordelatitud,
  lng: mivalordelongitud
}

Espero que te pueda servir de ayuda,

Saludos!!

@MiguelHernandezCh
Copy link

Muchas gracias por tu respuesta. Al correr el servidor con ionic serve todo esta funcionando perfecto. Pero al ejecutarlo en ios en la consola me aparece el mismo error.

image

@MiguelHernandezCh
Copy link

Ya lo pude resolver! este era mi linea

<script async defer src="http://maps.googleapis.com/maps/api/js?key=API_KEY" type="text/javascript"></script>

async defer era la linea que me estaba causando conflicto. Muchas gracias por tu respuesta, saludos!

@VigneshSAN
Copy link

VigneshSAN commented Nov 20, 2017 •
edited

Hi guys,

import { SlidingMarkers } form 'marker-animate-unobtrusive';

is not working, kindly help me to solve this issue guys.

And I am using Ionic 3.

@Anas786
Copy link

Anas786 commented Feb 22, 2018

allow js in your tsconfig.json like this:

"allowJs": true,

and then declare SlidingMarker like this:

var SlidingMarker = require('marker-animate-unobtrusive');

Mine is working properly using above method.

@Kelly27
Copy link

Kelly27 commented Mar 2, 2018

Hi, does this works on Ionic native Google Map??
Thanks.

@Anas786
Copy link

Anas786 commented Mar 2, 2018

No, i have not test it ionic native map but it is working on ionic 3 using javascript map

@feroz04
Copy link

feroz04 commented Feb 15, 2019 •
edited

my marker is moving over the buildings.i want to move the marker via roads (direction display). how to do ?

@vignesh-d
Copy link

marker-animate-unobtrusive for Ionic 4 ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
11 participants
@wuilmerj24 @fernandogutierrez27 @Anas786 @HamzaLJ @Kelly27 @MiguelHernandezCh @hectordav @feroz04 @vignesh-d @VigneshSAN and others