私がオススメするプログラミング教材です

【Flutter入門】Google Mapにmarkerをセットする方法

更新日:

記事の内容


google_maps_flutterを使って、Google Map上にマークをつける方法を紹介します。

実装したいこと

こんな風に、Google Map上に赤いマーカーを立てたい。

実際のコード

markersオプションに値を渡します。

body: GoogleMap(
  initialCameraPosition: _kGooglePlex,
  myLocationEnabled: true,
  markers: Set.from(_createMarker()),
  onMapCreated: (GoogleMapController controller) {
    _controller.complete(controller);
  },
),

4つのデータはこれです。

final List<LatLng> _markerLocations = [
  LatLng(37.43296265331129, -122.08632357078792),
  LatLng(37.43496265331129, -122.08732357078792),
  LatLng(37.43596265331127, -122.08832357078792),
  LatLng(37.43696265331126, -122.08932357078792),
];

関数を作成しているのが、ここです。

Set<Marker> _createMarker() {
  for (LatLng markerLocation in _markerLocations) {
    markers.add(
      Marker(
        markerId: MarkerId('myMarker'),
        position: markerLocation,
        onTap: () {
          print('Hello myMarker');
        },
      ),
    );
  }
  return markers;

DartとFlutterをより詳しく勉強したい人には、この記事がオススメです


SwiftでiOSアプリを開発したい人には、この記事がオススメです


KotlinでAndroidアプリを開発したい人には、この記事がオススメです


Gitをより詳しく勉強したい人には、この記事がオススメです


ゼロからWebエンジニアになりたい人には、この記事がオススメです


独学で実務っぽい経験を積みたい人には、この記事がオススメです

-Flutter, プログラミング

Copyright© プログラミング道場 , 2025 All Rights Reserved Powered by AFFINGER4.