title: Ionic Show Google Map Result from Json file
body: <p>I am doing an assignment. There is one scenario that user search for companies' name, etc. Then user click the result --> shows company details which include map. I would like to know how to pass json file's location data(a long list,I just paste hereinbelow a short one) to the view. Also, how to make a mark on the showed map. I used setCenter but got wrong result. tks for your reply in advance. Attach here js, html and css. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>angular.module('starter', ['ionic'])
  
  .run(function($ionicPlatform) {
  
    $ionicPlatform.ready(function() {
      
      if(window.cordova &amp;&amp; window.cordova.plugins.Keyboard) {
        cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      }
      if(window.StatusBar) {
        StatusBar.styleDefault();
      }
    });
  })
  
  .controller('MapController', function($scope, $ionicLoading) {
   
      google.maps.event.addDomListener(window, 'load', function(pos) {
          var myLatlng = new google.maps.LatLng(40.785091, -73.968285);
   
          var mapOptions = {
              center: myLatlng,
              zoom: 16,
              mapTypeId: google.maps.MapTypeId.ROADMAP
          };
   
          var map = new google.maps.Map(document.getElementById("map"), mapOptions);
   
          $scope.map = map;
      });
   
  });
  
  
  /// There is no place anymore, so I paste the Json file here:
  
  {
     "data": [{
  
          "office_id": "1",
          "name": "Demo Office",
          "shortname":"demo",
          "address": "somewhere",
          "latitude": "64.49815080",
          "longitude": "28.76102540",
          "active": "1",
          "locked": "0"
      }, {
          "office_id": "2",
          "name": "Health Center",
          "shortname":"health",
          "address": "Thailand",
          "latitude": "61.19945900",
          "longitude": "25.65550300",
          "active": "1",
          "locked": "0"
     
      }],
      "status": 0,
      "message": "some message",
      "messageID": 0
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* Empty. Add your own CSS if you like */
  .scroll {
      height: 100%;
  }
   
  #map {
      width: 100%;
      height: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"&gt;
          &lt;title&gt;&lt;/title&gt;
          &lt;link href="lib/ionic/css/ionic.css" rel="stylesheet"&gt;
          &lt;link href="css/style.css" rel="stylesheet"&gt;
          &lt;script src="lib/ionic/js/ionic.bundle.js"&gt;&lt;/script&gt;
          &lt;script src="cordova.js"&gt;&lt;/script&gt;
          &lt;script src="js/app.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body ng-app="starter"&gt;
          &lt;ion-pane&gt;
              &lt;ion-header-bar class="bar-stable"&gt;
                  &lt;h1 class="title"&gt;Ionic Blank Starter&lt;/h1&gt;
              &lt;/ion-header-bar&gt;
  
                &lt;ion-content ng-controller="MapController"&gt;
                    &lt;div id="map" data-tap-disabled="true"&gt;&lt;/div&gt;
                    
                &lt;/ion-content&gt;
                           
          &lt;/ion-pane&gt;
          &lt;script src="http://maps.googleapis.com/maps/api/js?key=[my api key]&amp;sensor=true"&gt;&lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>