javascript - zoom out Google map reveals another map, sometimes with my markers; angular -

i'm web dev student trying use google maps in angular app. can create new markers form i'm getting glitchy display problem wherein markers show , other times aren't there. when aren't there can zoom out until map shrinks point reveals map have markers.

this image below code shows example when markers did show up, there still mystery map underneath , time has 1 random marker. know what's going on? here's how i'm calling map , adding markers. apologies newbie hacks.

  function cityfactoryfunction($resource){     var factory = $resource("http://localhost:3000/cities/:id.json", {}, {       update: {method: "put"}     });     factory.createmarker = function(info, mymap){       var markers = [];       var infowindow = new google.maps.infowindow();       var geocoder = new google.maps.geocoder();       var address = info.address;       geocoder.geocode( { 'address': address}, function(results, status) {         if (status == google.maps.geocoderstatus.ok) {           var marker = new google.maps.marker({             map: mymap,             position: results[0].geometry.location,             title: info.city           });           marker.content = '<div class="infowindowcontent">' + info.desc + '</div>';           google.maps.event.addlistener(marker, 'click', function(){             infowindow.setcontent('<h2>' + info.name + '</h2>' + marker.content);             infowindow.open(mymap, marker);           });           markers.push(marker);         }       });     };     return factory;   }    function welcomectrlfunction(cityfactory){     var vm = this;     vm.cities = cityfactory.query();     // creates initial map       var mapoptions = {         zoom: 4,         center: new google.maps.latlng(38.90529, -77.02489),         maptypeid: google.maps.maptypeid.roadmap       };       var mymap = new google.maps.map(document.getelementbyid('map'), mapoptions);      // cycles through json making clickable map markers     vm.cities.$promise.then(function(response){       (i = 0; < vm.cities.length; i++){         cityfactory.createmarker(vm.cities[i], mymap);       }     });      // creates markers' info windows     openinfowindow = function(e, selectedmarker){       e.preventdefault();       google.maps.event.trigger(selectedmarker, 'click');     };     vm.newcity = new cityfactory();   }    // custom form directive   function cityformfunction(cityfactory){     var vm = this;     return{       templateurl: "city.form.html",       scope: {         city: "=",         formmethod: "@"       },       link: function(scope){         scope.create = function(){           cityfactory.save(scope.city, function(response){             console.log(response);             cityfactory.push(response);             cityfactory.createmarker(response);           });         };       }     };   }