title: How to add google map with multiple marker using ionic framework/
body: <p>I tried to display the map with multiple marker but there is always a white screen appear.I have attached my complete code below. please let me know where I am wrong.if i add the sipmle map then it integrate successfully but if i tried to add map with multiple markers it display white screen.</p>
  
  <pre><code>    CONTROLLERS.JS
  
       var cities = [
          {
              city : 'chandigarh',
              desc : 'Test',
              lat : 52.238983,
              long : -0.888509 
          },
          {
              city : 'chennai',
              desc : 'Test',
              lat : 52.238168,
              long : -52.238168
          },
  
      ];
  
      .controller('MapCltrl', function($scope,$http,$window, $ionicLoading, $compile,$ionicLoading) {
          // Map Settings //
          $scope.initialize = function() {
               var latitude;
               var longitude;
              var myLatlng = new google.maps.LatLng(30.444,
                      76.435);
  
              var mapOptions = {
                  center : myLatlng,
                   mapTypeId: google.maps.MapTypeId.ROADMAP,
                  zoom : 8,
                  mapTypeId : google.maps.MapTypeId.ROADMAP
              };
              var map = new google.maps.Map(document.getElementById("map1"), mapOptions);
            // Geo Location /
              navigator.geolocation.getCurrentPosition(function(pos) {
                  map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
                  var myLocation = new google.maps.Marker({
                      position: new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude),
                      map: map,
                      animation: google.maps.Animation.DROP,
                      title: "My Location"
                  });
              });
              $scope.map = map;
              // Additional Markers  FOR THE DIFFERENT CITIES//
              $scope.markers = [];
              var infoWindow = new google.maps.InfoWindow();
              var createMarker = function (info){
                  var marker = new google.maps.Marker({
                      position: new google.maps.LatLng(info.lat, info.long),
                      map: $scope.map,
                      animation: google.maps.Animation.DROP,
                      title: info.city
                  });
                  marker.content = '&lt;div class="infoWindowContent"&gt;' + info.desc + '&lt;/div&gt;';
                  google.maps.event.addListener(marker, 'click', function(){
                      infoWindow.setContent('&lt;h2&gt;' + marker.title + '&lt;/h2&gt;' + marker.content);
                      infoWindow.open($scope.map, marker);
                  });
                  $scope.markers.push(marker);
              }  
  
  // FOR LOOP TO ARRAY OF CITIES
              for (i = 0; i &lt; cities.length; i++){
                  createMarker(cities[i]);
              }
  
          };
          google.maps.event.addDomListener(document.getElementById("map1"), 'load', $scope.initialize());
  
      });
  </code></pre>
  
  <p>here is my
  citiesmap.html</p>
  
    -->
  
  <pre><code>&lt;script src="http://maps.googleapis.com/maps/api/js?sensor=false"&gt;&lt;/script&gt;
  
  &lt;ion-header-bar class="bar-positive"&gt;
  &lt;h1 class="title"&gt;Map&lt;/h1&gt;
  &lt;/ion-header-bar&gt;
  
  &lt;ion-view title="Map Overview"&gt;
  &lt;ion-content ng-controller="MapCltrl" ng-init="initialize()"&gt;
  
  &lt;div id="map1" data-tap-disabled="true"&gt;&lt;/div&gt;
  
  &lt;/ion-content&gt; 
   &lt;ion-footer-bar class="bar-stable"&gt;
                  &lt;a ng-click="centerOnMe()" class="button button-icon icon ion-navigate"&gt;Find Me&lt;/a&gt;
               &lt;/ion-footer-bar&gt;
  
  &lt;/ion-view&gt;
  </code></pre>
  
  <p>here is my
  app.js</p>
  
  <pre><code>.state('auth.citiesmaps', {
          url : '/citiesmaps',
          views : {
              'menuContent' : {
                  templateUrl : 'templates/auth-citiesmaps.html',
                  controller : 'MapCltrl'
              }
          }
      })
  </code></pre>
  
  <p>here is my log error:</p>
  
  <pre><code>06-25 16:13:09.395: E/Web Console(14997): Uncaught Error: [$injector:modulerr] Failed to instantiate module starter due to:
  06-25 16:13:09.395: E/Web Console(14997): Error: [$injector:modulerr] Failed to instantiate module starter.controllers due to:
  06-25 16:13:09.395: E/Web Console(14997): Error: [$injector:nomod] Module 'starter.controllers' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
  06-25 16:13:09.395: E/Web Console(14997): http://errors.angularjs.org/1.3.6/$injector/nomod?p0=starter.controllers
  06-25 16:13:09.395: E/Web Console(14997):     at file:///android_asset/www/lib/ionic/js/ionic.bundle.js:7888:12
  06-25 16:13:09.395: E/Web Console(14997):     at file:///android_asset/www/lib/ionic/js/ionic.bundle.js:9576:17
  06-25 16:13:09.395: E/Web Console(14997):     at ensure (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:9500:38)
  06-25 16:13:09.395: E/Web Console(14997):     at module (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:9574:14)
  06-25 16:13:09.395: E/Web Console(14997):     at file:///android_asset/www/lib/ionic/js/ionic.bundle.js:11906:22
  06-25 16:13:09.395: E/Web Console(14997):     at forEach (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:8147:20)
  06-25 16:13:09.395: E/Web Console(14997):     at loadModules (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:11890:5)
  06-25 16:13:09.395: E/Web Console(14997):     at file:///android_asset/www/lib/ionic/js/ionic.bundle.js:11907:40
  06-25 16:13:09.395: E/Web Console(14997):     at forEach (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:8147:20)
  06-25 16:13:09.395: E/Web Console(14997):     at loadModules (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:11890:5)
  </code></pre>