title: ionic2 how to use json data from external url?
body: <p>I am trying to fetch data from a json file and the the longitude and latitude in the file to display in google map but i am having a little problem reading the file when it is from a url.i am using this tutorial <a href="https://www.aspsnippets.com/Articles/Google-Maps-V3-Display-Colored-Markers-for-particular-type-of-location.aspx" rel="nofollow noreferrer">https://www.aspsnippets.com/Articles/Google-Maps-V3-Display-Colored-Markers-for-particular-type-of-location.aspx</a> . </p>
  
  <p>This is my error message.</p>
  
  <pre><code>Runtime Error
  Cannot read property 'lat' of undefined
  Stack
  TypeError: Cannot read property 'lat' of undefined
      at HomePage.loadMap (http://localhost:8100/build/main.js:58172:54)
      at HomePage.ionViewDidLoad (http://localhost:8100/build/main.js:58164:14)
      at ViewController._lifecycle (http://localhost:8100/build/main.js:17293:33)
      at ViewController._didLoad (http://localhost:8100/build/main.js:17166:14)
      at NavControllerBase._didLoad (http://localhost:8100/build/main.js:43860:18)
      at t.invoke (http://localhost:8100/build/polyfills.js:3:8971)
      at Object.onInvoke (http://localhost:8100/build/main.js:4480:37)
      at t.invoke (http://localhost:8100/build/polyfills.js:3:8911)
      at r.run (http://localhost:8100/build/polyfills.js:3:4140)
      at NgZone.run (http://localhost:8100/build/main.js:4348:62)
  </code></pre>
  
  <p>This is typescript file. </p>
  
  <pre><code>  loadMap() {
       var markers= this.http.get('http://thethinker.com.ng/techwand/usr.php').map(res =&gt; res.json()).subscribe(response =&gt; {
          return response.data;
  });
  
        var mapOptions = {
          center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      var infoWindow = new google.maps.InfoWindow();
      var latlngbounds = new google.maps.LatLngBounds();
      var map = new google.maps.Map(document.getElementById("map"), mapOptions);
      var i = 0;
      var interval = setInterval(function () {
          var data = markers;
          var myLatlng = new google.maps.LatLng(data.lat, data.lng);
          var icon = "http://maps.google.com/mapfiles/ms/icons/green.png";
          var marker = new google.maps.Marker({
              position: myLatlng,
              map: map,
              title: data.title,
              animation: google.maps.Animation.DROP,
              icon: new google.maps.MarkerImage(icon)
          });
          (function (marker, data) {
              google.maps.event.addListener(marker, "click", function (e) {
                  infoWindow.setContent(data.description);
                  infoWindow.open(map, marker);
              });
          })(marker, data);
          latlngbounds.extend(marker.position);
          i++;
          if (i == markers.length) {
              clearInterval(interval);
              var bounds = new google.maps.LatLngBounds();
              map.setCenter(latlngbounds.getCenter());
              map.fitBounds(latlngbounds);
          }
      }, 80);
  }
  </code></pre>
  
  <p>I have also tried it with normal string array and it works like in the tutorial but i dont know how to make it work from an external url.</p>