Unable to see Google Map Marker

ionic-v1
1

Hello Iconic world,
i am developing an app which consist of a Map window. Here is code the way i am loading map in that window. I am unable to see Markers, i can only see infowindow as shown in the given Snapshot
this is html template

<script id="templates/attendees.html" type="text/ng-template">
    <ion-view view-title="Map">
        <ion-content>
            <div id="map" ng-init="initialize()" style="height:500px;"></div>
        </ion-content>
    </ion-view>
</script>

and this is javascript code for loading map

 .controller('DeviceCtrl', function ($scope, $ionicPlatform, $http, $state) {
      $scope.initialize = function () {
      initialize();
  }
 })

 function initialize() {
  myCenter=new google.maps.LatLng(51.508742, -0.120850);
   var mapProp = {
    center: myCenter,
    zoom: 5,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), mapProp);
google.maps.event.addListener(map, 'click', function (event) {
    placeMarker(event.latLng,map);
 });

}

function placeMarker(location,map) { 
var marker = new google.maps.Marker({
    position: location,
    map: map,
});
var infowindow = new google.maps.InfoWindow({
    content: 'Latitude: ' + location.lat() + '<br>Longitude: ' + location.lng()
});
infowindow.open(map, marker);

}

image
Untitled.jpg592×768 85.2 KB

Please help me what is going wrong ?