title: Google Maps SVG marker with PNG fallback
body: <p>I've implemented the following code for a Google map with a custom SVG marker: </p>
  
  <pre><code>function add_marker( $marker, map ) {
  
      // var
      var latlng = new google.maps.LatLng( $marker.attr('data-lat'), $marker.attr('data-lng') );
  
      // create marker
      var iconBase = 'http://localhost:8888/theme/wp-content/themes/bananas/images/';
      var marker = new google.maps.Marker({
          position    : latlng,
          map         : map,
          icon        : iconBase + 'marker.svg'
      });
  
      // add to array
      map.markers.push( marker );
  
      // if marker contains HTML, add it to an infoWindow
      if( $marker.html() )
      {
          // create info window
          var infowindow = new google.maps.InfoWindow({
              content     : $marker.html()
          });
  
          // show info window when marker is clicked
          google.maps.event.addListener(marker, 'click', function() {
  
              infowindow.open( map, marker );
  
          });
      }
  
  }
  </code></pre>
  
  <p>This works great, but I wondered if it's possible to add a PNG fallback for browsers that do not support SVG?</p>
  
  <p>Maybe it's possible to display a div instead of an icon and then control the SVG detection with modernizr.</p>