플러터 [Flutter] 구글맵 [Googlemap] - json 데이터로 마커 생성(2023ver)

http로 전 세계 구글지사 json 파일을 받아 구글맵에 마커를 생성해 보겠습니다.

패키지 추가

HTTP 요청을 위해 http 패키지 추가

flutter pub add http

 
json으로 받아온 데이터를 직렬화해주는 패키지를 추가

flutter pub add json_serializable

flutter pub add --dev build_runner

json 파싱

구글지사 json 파일은 일반적인 구조를 가지고 있습니다.
데이터를 코드에서 사용할 수 있는 객체로 직렬화해야 합니다.
아래의 위치에 json
lib/src/locations.dart

import 'dart:convert';
import 'package:http/http.dart' as http;
import 'package:json_annotation/json_annotation.dart';
import 'package:flutter/services.dart' show rootBundle;

part 'locations.g.dart';

@JsonSerializable()
class LatLng {
  LatLng({
    required this.lat,
    required this.lng,
  });

  factory LatLng.fromJson(Map<String, dynamic> json) => _$LatLngFromJson(json);
  Map<String, dynamic> toJson() => _$LatLngToJson(this);

  final double lat;
  final double lng;
}

@JsonSerializable()
class Region {
  Region({
    required this.coords,
    required this.id,
    required this.name,
    required this.zoom,
  });

  factory Region.fromJson(Map<String, dynamic> json) => _$RegionFromJson(json);
  Map<String, dynamic> toJson() => _$RegionToJson(this);

  final LatLng coords;
  final String id;
  final String name;
  final double zoom;
}

@JsonSerializable()
class Office {
  Office({
    required this.address,
    required this.id,
    required this.image,
    required this.lat,
    required this.lng,
    required this.name,
    required this.phone,
    required this.region,
  });

  factory Office.fromJson(Map<String, dynamic> json) => _$OfficeFromJson(json);
  Map<String, dynamic> toJson() => _$OfficeToJson(this);

  final String address;
  final String id;
  final String image;
  final double lat;
  final double lng;
  final String name;
  final String phone;
  final String region;
}

@JsonSerializable()
class Locations {
  Locations({
    required this.offices,
    required this.regions,
  });

  factory Locations.fromJson(Map<String, dynamic> json) =>
      _$LocationsFromJson(json);
  Map<String, dynamic> toJson() => _$LocationsToJson(this);

  final List<Office> offices;
  final List<Region> regions;
}

Future<Locations> getGoogleOffices() async {
  const googleLocationsURL = 'https://about.google/static/data/locations.json';

  // Retrieve the locations of Google offices
  try {
    final response = await http.get(Uri.parse(googleLocationsURL));
    if (response.statusCode == 200) {
      return Locations.fromJson(json.decode(response.body));
    }
  } catch (e) {
    print(e);
  }

  // Fallback for when the above HTTP request fails.
  return Locations.fromJson(
    json.decode(
      await rootBundle.loadString('assets/locations.json'),
    ),
  );
}

이렇게 되면 존재하지 않는 파일 locations.g.dart 를 사용하기에 오류가 뜬다.

 
이때는 직렬화를 하면 해결된다.

flutter pub run build_runner build --delete-conflicting-outputs

종종 그래도 오류가 뜨는 경우가 있는데 그럴 경우 xcode를 재부팅 후 다시 실행해보면 해결된다.

 
http 데이터를 assets 파일에 저장한다.

mkdir assets
cd assets
curl -o locations.json https://about.google/static/data/locations.json

 
이후 pubspec.yaml 파일 flutter 섹션에 위치를 추가한다.
pubspec.yaml

flutter:
  uses-material-design: true

  assets:
    - assets/locations.json

 

반환된 json 데이터로 마커 생성

이제 지도 데이터를 요청한 다음 반환 정보를 사용하여 지도에 추가하는 코드를 작성한다.
lib/main.dart

import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'src/locations.dart' as locations;

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final Map<String, Marker> _markers = {};
  Future<void> _onMapCreated(GoogleMapController controller) async {
    final googleOffices = await locations.getGoogleOffices();
    setState(() {
      _markers.clear();
      for (final office in googleOffices.offices) {
        final marker = Marker(
          markerId: MarkerId(office.name),
          position: LatLng(office.lat, office.lng),
          infoWindow: InfoWindow(
            title: office.name,
            snippet: office.address,
          ),
        );
        _markers[office.name] = marker;
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Google Office Locations'),
          backgroundColor: Colors.green[700],
        ),
        body: GoogleMap(
          onMapCreated: _onMapCreated,
          initialCameraPosition: const CameraPosition(
            target: LatLng(0, 0),
            zoom: 2,
          ),
          markers: _markers.values.toSet(),
        ),
      ),
    );
  }
}

• _onMapCreated 에서 json 파싱을 하여 데이터를 반환받고, setState() 내에서 마커를 생성합니다.

 

실행화면

참고한 사이트

https://codelabs.developers.google.com/codelabs/google-maps-in-flutter?hl=ko#0

Flutter 앱에 Google 지도 추가  |  Google Codelabs