title: ionic 2 dynamic markers in Google Maps with profile picture
body: <p>I am building an ionic2 application with tracking data stored in the database, i am able to get geolocation data and initialise a map, but i have an array of <code>markers</code> with <code>profileimageurl</code> and <code>lat</code> <code>lng</code> values, i am trying to bring the list of markers on the map with the profileimageurl as icon, but it did not work</p>
  
  <p><strong>Google map Init</strong></p>
  
  <pre><code>initMap(): Promise&lt;void&gt; {
   let promise: Promise&lt;void&gt; = new Promise&lt;void&gt;((resolve, reject) =&gt; {
    Geolocation.getCurrentPosition().then((position) =&gt; {
      let latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
      let GooleMap = new google.maps.Map(document.getElementById('map'), {
        center: latLng,
        zoom: 18
      });
      let marker = new google.maps.Marker({
        position: latLng,
        map: GooleMap,
        title: 'My Location',
      });
    });
   });
   return promise;
  }
  </code></pre>
  
  <p><strong>Markers array</strong></p>
  
  <pre><code>  markers: marker[] = [
    {
        lat: 51.673858,
        lng: 7.815982,
        label: 'A',
        profileImage: "http://www.gravatar.com/avatar/d735414fa8687e8874783702f6c96fa6?s=90&amp;d=identicon&amp;r=PG"
    },
    {
        lat: 51.373858,
        lng: 7.215982,
        label: 'B',
        profileImage: "http://placekitten.com/90/90"
    }
  ]
  </code></pre>
  
  <p>I am expecting a result something like this
  <a href="https://i.stack.imgur.com/I6vGO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/I6vGO.png" alt="enter image description here"></a></p>
  
  <p>I have been struggling with this for a while, i would much appreciate an answer, Thank you</p>