Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

Effects and animations with Google Maps markers in HTML5

Google maps jQuery Javascript Web Development Front End Scripts

Google Maps API doesn't provide built-in fade or animation effects for standard markers. However, you can create custom animations by implementing Custom Overlays that give you full control over marker appearance and behavior.

Why Custom Overlays?

Standard Google Maps markers have limited animation options. Custom overlays allow you to:

  • Control opacity and CSS transitions
  • Create fade in/out effects
  • Add custom animations using CSS or JavaScript
  • Implement bounce, slide, or rotation effects

Creating a Custom Overlay Class

<script>
// Custom overlay class extending Google Maps OverlayView
function CustomMarker(position, map, content) {
    this.position = position;
    this.map = map;
    this.content = content;
    this.div = null;
    this.setMap(map);
}

// Extend OverlayView
CustomMarker.prototype = new google.maps.OverlayView();

// Create the marker element
CustomMarker.prototype.onAdd = function() {
    var div = document.createElement('div');
    div.style.position = 'absolute';
    div.style.cursor = 'pointer';
    div.innerHTML = this.content;
    div.style.transition = 'opacity 0.5s ease-in-out';
    
    this.div = div;
    var panes = this.getPanes();
    panes.overlayMouseTarget.appendChild(div);
};

// Position the marker
CustomMarker.prototype.draw = function() {
    var overlayProjection = this.getProjection();
    var position = overlayProjection.fromLatLngToDivPixel(this.position);
    
    var div = this.div;
    div.style.left = position.x + 'px';
    div.style.top = position.y + 'px';
};

// Remove marker
CustomMarker.prototype.onRemove = function() {
    if (this.div) {
        this.div.parentNode.removeChild(this.div);
        this.div = null;
    }
};

// Animation methods
CustomMarker.prototype.fadeIn = function() {
    this.div.style.opacity = '1';
};

CustomMarker.prototype.fadeOut = function() {
    this.div.style.opacity = '0';
};
</script>

Example: Animated Marker with Fade Effects

<!DOCTYPE html>
<html>
<head>
    <style>
        #map { height: 400px; width: 100%; }
        .custom-marker {
            background: #ff6b6b;
            border-radius: 50%;
            width: 20px;
            height: 20px;
            border: 3px solid white;
            box-shadow: 0 2px 10px rgba(0,0,0,0.3);
        }
        .fade-marker { opacity: 0; }
    </style>
</head>
<body>
    <div id="map"></div>
    <button onclick="toggleMarker()">Toggle Fade</button>

    <script>
        let map, customMarker;
        
        function initMap() {
            map = new google.maps.Map(document.getElementById('map'), {
                zoom: 10,
                center: { lat: 40.7128, lng: -74.0060 }
            });
            
            // Create custom marker with fade animation
            var markerContent = '<div class="custom-marker fade-marker"></div>';
            customMarker = new CustomMarker(
                new google.maps.LatLng(40.7128, -74.0060),
                map,
                markerContent
            );
            
            // Fade in after creation
            setTimeout(function() {
                customMarker.fadeIn();
            }, 500);
        }
        
        function toggleMarker() {
            var currentOpacity = customMarker.div.style.opacity;
            if (currentOpacity === '0' || currentOpacity === '') {
                customMarker.fadeIn();
            } else {
                customMarker.fadeOut();
            }
        }
    </script>
    
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>
</body>
</html>

Advanced Animation Effects

You can enhance your custom markers with CSS animations:

// CSS for bounce effect
.bounce-marker {
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-10px); }
    60% { transform: translateY(-5px); }
}

// JavaScript method to add bounce
CustomMarker.prototype.bounce = function() {
    this.div.classList.add('bounce-marker');
};

Key Considerations

  • Performance: Custom overlays are less optimized than standard markers
  • Event Handling: Implement click events manually on the div element
  • Clustering: Standard marker clustering won't work with custom overlays
  • Mobile: Test animations on mobile devices for smooth performance

Conclusion

Custom overlays provide complete control over marker animations and effects in Google Maps. While they require more code than standard markers, they enable rich visual experiences that enhance user interaction with your map applications.

Updated on: 2026-03-15T23:18:59+05:30

302 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements