Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

.gif marker google maps

I have in my code this

var map;
  function initialize() {
    var mapDiv = document.getElementById('map-canvas');
    map = new google.maps.Map(mapDiv, {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    google.maps.event.addListenerOnce(map, 'tilesloaded', addMarkers);

  }

  function addMarkers() {
    var iconoMarca = "/assets/giftRayo.gif");       
    var bounds = map.getBounds();
    var southWest = bounds.getSouthWest();
    var northEast = bounds.getNorthEast();
    var lngSpan = northEast.lng() - southWest.lng();
    var latSpan = northEast.lat() - southWest.lat();
    for (var i = 0; i < 10; i++) {
      var latLng = new google.maps.LatLng(southWest.lat() + latSpan * Math.random(),
                                          southWest.lng() + lngSpan * Math.random());
      var marker = new google.maps.Marker({
        position: latLng,
        map: map,
        icon: iconoMarca
      });
    }
  }

but the marker doesn't appear and if I use a png or jpeg it works. What am I doing wrong?? Do the gif animations have another treatment?

like image 244
Jorge Avatar asked May 12 '11 14:05

Jorge


People also ask

Can I put a marker on Google Maps?

Add a placeOn your computer, sign in to My Maps. Open or create a map. A map can have up to 10,000 lines, shapes, or places. Select a layer and click where to put the place.

What is the marker on Google Maps called?

The Google Maps pin is the inverted-drop-shaped icon that marks locations in Google Maps. The pin is protected under a U.S. design patent as "teardrop-shaped marker icon including a shadow".


1 Answers

As a standard, the markers use something called optimized rendering that always renders the markers as static. To see animated gifs you need to set optimized = false on your marker. The code for generating your marker would then be:

var marker = new google.maps.Marker({
    position: latLng,
    map: map,
    icon: iconoMarca,
    optimized: false
  });

This should solve your problem.

Ps.: You seem to have a small bug in your code:

var iconoMarca = "/assets/giftRayo.gif");  

You should remove the ).

like image 180
Kasper Vesth Avatar answered Oct 10 '22 06:10

Kasper Vesth