ionic2 how to use json data from external url?

Question

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 https://www.aspsnippets.com/Articles/Google-Maps-V3-Display-Colored-Markers-for-particular-type-of-location.aspx .

This is my error message.

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)

This is typescript file.

  loadMap() {
     var markers= this.http.get('http://thethinker.com.ng/techwand/usr.php').map(res => res.json()).subscribe(response => {
        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);
}

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.

You are trying to access `markers[0].lat` but the markers get loaded asynchronously, which means markers is not yet defined. Try moving the your whole code below the http request into the `.subscribe` callback. Then you should be able to access the markers using `response.data[0].lat`. — Andreas Gassmann, Jun 07 '17 at 16:51
Still not working. getting new error Runtime Error Maximum call stack size exceeded — arinze, Jun 07 '17 at 17:21
@AndreasGassmann is totally correct, can you edit your code with AndreasGassmann's suggestion — eko, Jun 08 '17 at 05:39
Possible duplicate of [How do I return the response from an Observable/http/async call in angular2?](https://stackoverflow.com/questions/43055706/how-do-i-return-the-response-from-an-observable-http-async-call-in-angular2) — eko, Jun 08 '17 at 06:07

ionic2 how to use json data from external url?

0 Answers0