title: google maps Custom marker angular
body: <p>I use google map I build custom marker by using HTML5 Canvas.
  with this function.</p>
  
  <pre><code>   function createMarker(picture) {
  
   var canvas = document.createElement("canvas");
   canvas.width = 40;
   canvas.height = 50;
   var context = canvas.getContext("2d");
   context.fillStyle = "rgb(193,101,214)";
   context.beginPath();
  
   context.moveTo(0,0);
   context.lineTo(40,0);
   context.lineTo(40,40);
   context.lineTo(25,40);
   context.lineTo(20,50);
   context.lineTo(15,40);
   context.lineTo(0,40);
   context.fill();
  
   var img = new Image();
   img.src = picture;
   context.drawImage(img, 2, 2, 36, 36);
   return canvas.toDataURL();}
  </code></pre>
  
  <p>and when calling it in marker </p>
  
  <pre><code>marker = new google.maps.Marker({
                 position: location,
                 map: $scope.map,
                 icon:createMarker("img/cat.jpg")
             });
  </code></pre>
  
  <p>the problem is that it gives me empty icon without image like this:
  <img src="https://i.stack.imgur.com/cH9uB.png" alt=""></p>
  
  <p>how to make the image appear in icon instead of call the function createMarker("img/cat.jpg") twice before marker the icon appear like this:
  <img src="https://i.stack.imgur.com/Vitun.png" alt=""></p>