google-maps-api-3 polymer google-maps-markers polymer-1.0 google-web-component

CSS animation as a Google Map Marker (Polymer 1.0)?

I'm trying to create a custom "map marker" icon inside the custom element <google-map>, using the web component library, Polymer.

How would I go about using an animated GIF?
How would I go about using a CSS animation?

I've attempted both but failed.

Here's what I've got so far...

        Polymer({
          is: 'css-marker'
        });

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

html,
body {
 height: 100%; min-height: 100%; background: #999;
}
main    { width: 90%; min-height: 100%; height: 100%; margin: 0 auto; }
section { background: #fff; width: 44%; min-height: 100%; float: left; margin: 0 .5rem; }
article { padding: 1rem 3rem 0; }
div     { margin:  0 0; text-align: center; }
p       { padding: 1rem; }

h1 { padding: 2rem 0; text-align: center; background: #f2f2f2; font-weight: normal; border-top: 7px solid #999; }
h2 { margin: 2rem 0 .25rem; }

.info { padding: 1rem; }
.google-map { margin: 0 !important; position: relative; width: 100%; height: 300px; }





/* Pulse animation */
figure { text-align: center; height: 50px; position: relative; z-index: 1; }
.pulsate { position: relative; display: inline-block; -moz-transform: scale(1.4); -webkit-transform: scale(1.4); transform: scale(1.4); text-align: center; }
.pulsate:before { content: ""; display: block; background: black; width: 10px; height: 10px; border: 5px solid lime; border-radius: 100%; position: absolute; top: 0; left: 0; z-index: 10; }
.pulsate:after { content: ""; display: block; background: transparent; border: 10px solid lime; border-radius: 60px; height: 50px; width: 50px; position: absolute; top: -25px; left: -25px; opacity: 0; z-index: 1;

    -moz-animation: pulse 1.5s infinite ease-out;
    -webkit-animation: pulse 1.5s infinite ease-out;
    animation: pulse 1.5s infinite ease-out; }


/* Animation */
@-moz-keyframes pulse {
 0% { -moz-transform: scale(0); opacity: 0.0; }
 25% { -moz-transform: scale(0); opacity: 0.1; }
 50% { -moz-transform: scale(0.1); opacity: 0.3; }
 75% { -moz-transform: scale(0.5); opacity: 0.5; }
 100% { -moz-transform: scale(1); opacity: 0.0; }
}

@-webkit-keyframes pulse {
 0% { -webkit-transform: scale(0); opacity: 0.0; }
 25% { -webkit-transform: scale(0); opacity: 0.1; }
 50% { -webkit-transform: scale(0.1); opacity: 0.3; }
 75% { -webkit-transform: scale(0.5); opacity: 0.5; }
 100% { -webkit-transform: scale(1); opacity: 0.0; }
}

@keyframes pulse {
 0% { transform: scale(0); opacity: 0.0; }
 25% { transform: scale(0); opacity: 0.1; }
 50% { transform: scale(0.1); opacity: 0.3; }
 75% { transform: scale(0.5); opacity: 0.5; }
 100% { transform: scale(1); opacity: 0.0; }
}

<base href="https://polygit.org/components/">

<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">
<link rel="import" href="google-map/google-map.html">
<link rel="import" href="google-map/google-map-marker.html">


<dom-module id="css-marker">
  <template>

    <main>

        <!-- GOOGLE MAP
        ------------------------->
        <section>
            <h1>Polymer: Animated GIF map marker?</h1>
            <div class="info">
              <p>This is the same animated GIF image that you see in the map below, but it's not working in the map?</p>
              <img src="http://www.firepineapple.com/application/views/images/map_marker.gif" alt="">
            </div>

            <div class="google-map">
              <google-map 
                disable-default-ui 
                fit-to-markers 
                latitude="30.236045" 
                longitude="-93.314282" 
                zoom="17" 
                api-key="AIzaSyA5SYKRx5yogz5_NUsMvQtCy1plDAamKYE" 
                class="hero-image">

                  <google-map-marker 
                    latitude="30.236045" 
                    longitude="-93.314282" 
                    icon="http://www.firepineapple.com/application/views/images/map_marker.gif">
                  </google-map-marker>
              </google-map>
            </div>

        </section>


        <!-- GOOGLE MAP
        ------------------------->
        <section>
            <h1>Polymer: CSS animation map marker?</h1>
            <div class="info">
              <p>The same animation is pasted below inside the map marker, but it's default icon shows up instead?</p>
              <figure>
                <div class="pulsate"></div>
              </figure>
            </div>

            <div class="google-map">
              <google-map 
                disable-default-ui 
                fit-to-markers 
                latitude="30.236045" 
                longitude="-93.314282" 
                zoom="17" 
                api-key="AIzaSyA5SYKRx5yogz5_NUsMvQtCy1plDAamKYE" 
                class="hero-image">

                  <google-map-marker latitude="30.236045" longitude="-93.314282">
                    <figure>
                      <div class="pulsate"></div>
                    </figure>
                  </google-map-marker>
              </google-map>
            </div>

        </section>

    </main>

  </template>
</dom-module>




<!-- Custom Element 
---------------------------------------->
<css-marker></css-marker>

Solution

<google-map-marker> doesn't set the optimized option when creating the Marker. The map marker enables optimization by default, which prevents animated GIFs:

optimized

Optimization renders many markers as a single static element. Optimized rendering is enabled by default. Disable optimized rendering for animated GIFs or PNGs, or when each marker must be rendered as a separate DOM element (advanced usage only).

Luckily, the Marker class has a setOptions() API to modify the marker options after instantiation. Here's how to disable optimization on the map markers:

Setup an event listener for the <google-map>.google-map-ready event to be sure the map is fully loaded before accessing the markers.
In the event handler, iterate <google-map>.markers to get at the array of <google-map-marker>s on the map.
For each marker, get the Marker instance from <google-map-marker>.marker, and call setOptions({optimized: false}) on the instance.

HTMLImports.whenReady(() => {
  Polymer({
    is: 'x-foo',
    listeners: {
      'map.google-map-ready': '_disableMarkerOptimization'
    },
    _disableMarkerOptimization: function() {
      this.$.map.markers.forEach(m => {
        m.marker.setOptions({optimized: false});
      });
    }
  });
});

<head>
  <base href="https://polygit.org/polymer+1.7.0/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="polymer/polymer.html">
  <link rel="import" href="google-map/google-map.html">
</head>
<body>
  <x-foo></x-foo>

  <dom-module id="x-foo">
    <template>
      <style>
        google-map {
          height: 100vh;
          width: 100vw;
        }
      </style>
      <google-map id="map"
                  disable-default-ui 
                  fit-to-markers 
                  latitude="30.236045" 
                  longitude="-93.314282" 
                  zoom="17" 
                  api-key="AIzaSyA5SYKRx5yogz5_NUsMvQtCy1plDAamKYE">

        <google-map-marker latitude="30.236045" 
                           longitude="-93.314282" 
                           icon="http://www.firepineapple.com/application/views/images/map_marker.gif">
        </google-map-marker>
      </google-map>
    </template>
  </dom-module>
</body>

^codepen