Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Animations not working for map markers

See original GitHub issue

Issue description When trying to add an animation to a marker with, for example,

<agm-marker [iconUrl]="{url:userMarker, anchor:{x:5, y:5}, zIndex: 100,size: {width: 10, height: 10}}" [latitude]="latitude" [longitude]="longitude" [animation]="'BOUNCE'"></agm-marker>

it throws the following error:

console.js:35 ReferenceError: google is not defined at MarkerManager.push../node_modules/@agm/core/services/managers/marker-manager.js.MarkerManager.addMarker (marker-manager.js:73)

it looks like the variable google is not defined in the scope of the marker-manager.js file.

Steps to reproduce and a minimal demo of the problem Just try adding any animation to a marker.

Current behavior Throws error in console log, marker still displayed.

Expected/desired behavior Marker both displayed and animated.

angular2 & angular-google-maps version @agm/core": “^1.0.0-beta.3 @angular/core”: "^6.0.3

Issue Analytics

State:
Created 5 years ago
Comments:7

Top GitHub Comments

4reactions

AncaorDevcommented, Oct 30, 2018

I had the same problem and it was initialized before I loaded the component agm-map What I did was initialize an indefinite variable and then output mapReady give value to that variable.

— map.component.ts myAnimation:any; mapReading(){ myAnimation = ‘BOUNCE’; } — HTML <agm-map (mapReady)="mapReading()"> <agm-marker [iconUrl]="[animation]="myAnimation"></agm-marker> </agm-map>

0reactions

ghostcommented, Sep 16, 2019

you import AgmCoreModule. Also, make sure to use the latest version of AGM

Top Results From Across the Web

Animations not working for map markers · Issue #1514 - GitHub

Just try adding any animation to a marker. Current behavior. Throws error in console log, marker still displayed. Expected/desired behavior

Google maps marker DROP animation is inconsistent

To get the marker to drop again, set the map property to null (removing it from the map), then set the animation again,...

Marker Animations | Maps JavaScript API - Google Developers

Click on the marker to toggle the animation between a BOUNCE animation and no animation. Read the documentation. To navigate, press the arrow...

Animated Markers - Maps API for JavaScript - HERE Developer

Update marker position with animation. This example shows visualization of animated DOM markers on a map. Markers change their positions to random geo ......

Google Maps Marker animation - Building with Google Maps API

The goal of this video is to add animations to the markers (DROP and BOUNCE), create an info window with the `InfoWindow()` constructor, ......