title: Flutter How Can I Get Markers from JSON API and show on Google Map
body: <p>I make a simple app get data marker from JSON API and draw them on Google Map.</p>
  <p>I have get marker information from the API (URL) and added it to the list allMarkers.</p>
  <p>But when I run my app, Map is not working and got this error:</p>
  <p><code>type 'List&lt;dynamic&gt;' is not a subtype of type 'String'</code></p>
  <p><strong>This is my full Home.dart code</strong></p>
  <pre><code>import 'dart:async';
  import 'dart:convert';
  import 'package:flutter/material.dart';
  import 'package:http/http.dart' as http;
  
  import 'package:google_maps_flutter/google_maps_flutter.dart';
  
  class Home extends StatefulWidget {
    @override
    _Home2State createState() =&gt; _HomeState();
  }
  
  class _HomeState extends State&lt;Home&gt; {
    Future _future;
  
    Future loadString() async {
      var url = &quot;http://10.0.2.2/GoApp/locations.php&quot;;
      var response = await http.get(url);
      final dynamic responsebody = jsonDecode(response.body);
      print(responsebody);
      return responsebody;
    }
  
    List&lt;Marker&gt; allMarkers = [];
    GoogleMapController _controller;
  
    @override
    void initState() {
      // TODO: implement initState
      super.initState();
      _future = loadString();
    }
  
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        body: Stack(children: [
          Container(
            height: MediaQuery.of(context).size.height,
            width: MediaQuery.of(context).size.width,
            child: FutureBuilder(
              future: _future,
              builder: (context, AsyncSnapshot snapshot) {
                if (!snapshot.hasData) {
                  return Center(
                    child: CircularProgressIndicator(),
                  );
                }
                List&lt;dynamic&gt; parsedJson = jsonDecode(snapshot.data);
  
                allMarkers = parsedJson.map((i) {
                  return Marker(
                    markerId: MarkerId(i['loc_id']),
                    position: LatLng(i['loc_x'], i['loc_y']),
                    onTap: () {},
                  );
                }).toList();
  
                return GoogleMap(
                  initialCameraPosition: CameraPosition(
                      target: LatLng(40.7128, -74.0060), zoom: 1.0),
                  markers: Set.from(allMarkers),
                  onMapCreated: mapCreated,
                  mapType: MapType.normal,
                  tiltGesturesEnabled: true,
                  compassEnabled: true,
                  rotateGesturesEnabled: true,
                  myLocationEnabled: true,
                );
              },
            ),
          ),
        ]),
      );
    }
  
    void mapCreated(controller) {
      setState(() {
        _controller = controller;
      });
    }
  }
  </code></pre>
  <p><strong>My json data from URL:</strong></p>
  <pre><code>[
   { 
     &quot;loc_id&quot;: &quot;8D5D-4CD323560F59&quot;, 
     &quot;loc_x&quot;: 40.7128, 
     &quot;loc_y&quot;: -74.0060 
   },
   { 
     &quot;loc_id&quot;: &quot;E3E0D2C5-CB82&quot;, 
     &quot;loc_x&quot;: 41.7128, 
     &quot;loc_y&quot;: -75.0060 
   }
  ]
  </code></pre>
  <p><strong>How Can Resolved This Issuse?</strong></p>