title: google map custom marker with base64 string
body: <p>I have tried quite a few ways to load my base64 string image as a google map custom marker in Chrome.
  This:</p>
  
  <pre><code>var marker = new google.maps.Marker({
      position: latLng,
      map: map,
      title: 'hello',
      id: 'the id',
      icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAA..."
  });
  </code></pre>
  
  <p>As recommended <a href="https://stackoverflow.com/questions/13061780/marker-using-base64-encoded-string/13070467#13070467">here</a>, cause my image to cover the top half of my 800x400px map.</p>
  
  <p>So I figured I had to re-size the image and did the following, and no image displays.</p>
  
  <pre><code>var my_marker = new Image(30, 30);
  $(my_marker).attr('style', 'z-index: 1000')
  my_marker.onload = function () {
      var marker = new google.maps.Marker({
                      position: pos,
                      map: map,
                      title: pps[0].place_name,
                      icon: my_marker
                  });
                  map.setCenter(pos);
  };
  my_marker.src = pps[0].place_photo; 
  </code></pre>
  
  <p>Although when I stop the code in developer tools the my_marker object looks great, including the z-index.</p>
  
  <p>Any ideas on what I should do to size the base64 image and get it to appear as a google maps marker? That is the issue: re-sizing the image from the size it was when the base64 was originally generated - very large in my case.  Thanks</p>