Não consigo imaginar como seria a vida sem o Google Maps. Nós o usamos para tudo, desde encontrar direções para um destino, procurar um restaurante ou posto de gasolina próximo, apenas aumentar e diminuir o zoom do mapa para ver o Street View de qualquer local do planeta.
Adicionar o Google Maps ao seu aplicativo móvel pode abrir um mundo totalmente novo para seus usuários-literalmente. Neste tutorial, mostraremos como usar o plug-in oficial para integrar o Google Maps em seu aplicativo Flutter.
Aqui está o que vamos cobrir:
- Criação de um projeto no Google Cloud Platform
- Ativando a API do Google Maps
- Gerando e restringindo chaves de API
- Adicionando o Google Maps ao Flutter (Android)
- Adicionando o Google Maps ao Flutter (iOS)
- Adicionando o widget
GoogleMap
- Mapas de estilo no Flutter
- Modificando seus mapas com o widget
GoogleMap
- Mostrando uma lista de mapas
- Tirando um instantâneo
Criação de um projeto no Google Cloud Platform
A primeira etapa é criar um projeto no Google Developers Console . Isso é necessário porque você precisará de APIs para integrar o Google Maps em seu aplicativo.
Vá para o Google Developers Console e clique no projeto já selecionado.
Clique em NOVO PROJETO e insira os detalhes.
Clique no nome do projeto atual novamente e você verá o novo projeto criado na lista.
Habilitando a API Maps
Depois que o projeto for criado, você terá que habilitar o Maps API SDK para Android e iOS.
- Clique no menu Biblioteca à esquerda
- Pesquise “Maps SDK”
- Clique em SDK do Maps para Android e, em seguida, clique em Ativar
Gerar e restringir chaves de API
A próxima etapa é gerar as chaves de API.
- Clique no menu Credenciais à esquerda
- Clique no botão + CRIAR CREDENCIAIS
- Selecione a opção chave API
Se você tem como alvo as duas plataformas, deve obter duas chaves de API para rastreá-las melhor.
Depois de criar as chaves de API, recomendo enfaticamente a implementação de algumas restrições. Por exemplo, se você deseja usar as chaves de API apenas para um mapa, deve permitir que sejam usadas apenas pelo serviço do Maps.
Existem dois tipos de restrições:
- Restrições de aplicativos permitem que você defina qual tipo de aplicativo deve ter acesso a esta chave (ou seja, Android ou iOS). Você pode selecionar a opção apropriada para garantir que a chave que você criou funcione apenas para aquela plataforma específica
- As restrições de API permitem que você selecione quais serviços podem ser acessados usando esta chave. Se fosse apenas pelo mapa, você selecionaria API do Google Maps na lista
Adicionando o Google Maps ao aplicativo Flutter (Android)
Para poder usar o Google Maps dentro do aplicativo por meio da chave de API que você criou na seção anterior, você terá que copiar e colar de acordo com as instruções abaixo.
Primeiro, abra seu projeto Flutter e navegue até o arquivo neste local: android/app/src/main/AndroidManifest.xml
.
A seguir, cole o código abaixo:
Substitua o valor "YOUR KEY HERE"
por uma chave API que você criou. Em seguida, adicione a permissão de localização.
Agora, o arquivo AndroidManifest.xml
deve ser assim:
...
Adicionando o Google Maps ao Flutter (iOS)
As etapas para executar o Google Maps em um aplicativo Flutter para dispositivos iOS são semelhantes ao procedimento para Android.
Primeiro, especifique sua chave de API no delegado do aplicativo ios/Runner/AppDelegate.swift
Em seguida, escreva a instrução import
GoogleMaps
na parte superior para evitar problemas de compilação do iOS.
O arquivo deve ser semelhante a este:
import UIKit importar Flutter importar mapas do Google @UIApplicationMain @objc class AppDelegate: FlutterAppDelegate { substituir a aplicação func ( _ aplicativo: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]? )-> Bool { GeneratedPluginRegistrant.register (com: self) GMSServices.provideAPIKey ("YOUR-KEY") return super.application (application, didFinishLaunchingWithOptions: launchOptions) } }
A seguir, abra o Xcode e adicione a permissão de localização no arquivo info.plist
:
NSLocationWhenInUseUsageDescription O aplicativo precisa de permissão de localização
Adicionando o widget GoogleMap
Depois de concluir as etapas descritas abaixo, você poderá ver o Google Maps na tela de seu aplicativo Flutter.
Primeiro, adicione o plug-in google_maps_flutter
ao pubspec.yaml
arquivo.
dependências
: vibração: sdk: flutter cupertino_icons: 1.0.0 google_maps_flutter: ^ 2.0.1
Em seguida, coloque o widget GoogleMap
em seu arquivo Dart.
GoogleMap ( initialCameraPosition: _kInitialPosition, ),
O
GoogleMap
recebe um _kInitialPosition
, que contém o local padrão para mostrar no mapa quando ele é carregado.
LatLng final estático _kMapCenter= LatLng (19.018255973653343, 72.84793849278007); static final CameraPosition _kInitialPosition= CameraPosition (alvo: _kMapCenter, zoom: 11,0, inclinação: 0, rumo: 0);
Aqui está o código mínimo para mostrar o mapa:
import'package: flutter/material.dart'; import'package: google_maps_flutter/google_maps_flutter.dart'; class SimpleMap extends StatefulWidget { @sobrepor _SimpleMapState createState ()=& gt; _SimpleMapState (); } classe _SimpleMapState estende State & lt; SimpleMap & gt; { LatLng final estático _kMapCenter= LatLng (19.018255973653343, 72.84793849278007); static final CameraPosition _kInitialPosition= CameraPosition (alvo: _kMapCenter, zoom: 11,0, inclinação: 0, rumo: 0); @sobrepor Construção de widget (contexto BuildContext) { return Scaffold ( appBar: AppBar ( título: Texto ('Demonstração do Google Maps'), ), corpo: GoogleMap ( initialCameraPosition: _kInitialPosition, ), ); } }
Mapas de estilo no Flutter
Se você está trabalhando em um produto especialmente estiloso e deseja que seu mapa reflita a aparência de sua marca, pode personalizá-lo.
Para este exemplo, tentaremos criar um estilo de mapa semelhante ao do Uber seguindo estas etapas:
- Vá para este site
- Selecione o tema prata
- Clique em Ajustar ponto de referência e rótulos
- Restaure as cores Park
- Clique em Concluir
- Clique no botão COPIAR JSON
- Clique no botão COPIAR JSON
Agora, com o estilo de mapa em mãos, você poderá colocá-lo dentro do aplicativo e fazer com que o plugin o consuma.
Primeiro, crie uma pasta ativos
na raiz do aplicativo.
Em seguida, crie um arquivo map_style.json
dentro dele e cole o snippet de código que você copiou.
Adicione uma referência no arquivo pubspec.yaml
:
ativos
: -map_style.json
Carregue o novo estilo em um mapa por meio do GoogleMapController
. O código atualizado deve ser assim:
import'package: flutter/material.dart'; import'package: google_maps_flutter/google_maps_flutter.dart'; class SimpleMap extends StatefulWidget { @sobrepor _SimpleMapState createState ()=& gt; _SimpleMapState (); } classe _SimpleMapState estende State & lt; SimpleMap & gt; { LatLng final estático _kMapCenter= LatLng (19.018255973653343, 72.84793849278007); static final CameraPosition _kInitialPosition= CameraPosition (alvo: _kMapCenter, zoom: 11,0, inclinação: 0, rumo: 0); GoogleMapController _controller; Futuro & lt; void & gt; onMapCreated (controlador GoogleMapController) async { _controller=controlador; Valor da string=espera DefaultAssetBundle.of (contexto) .loadString ('assets/map_style.json'); _controller.setMapStyle (valor); } @sobrepor Construção de widget (contexto BuildContext) { return Scaffold ( appBar: AppBar ( título: Texto ('Demonstração do Google Maps'), ), corpo: GoogleMap ( initialCameraPosition: _kInitialPosition, onMapCreated: onMapCreated, ), ); } }
onMapCreated
é um retorno de chamada que é chamado quando o mapa está pronto para uso. Ele fornece o GoogleMapController
, que é realmente útil para realizar certas ações no mapa. Para este exemplo, nós o usamos para definir o estilo do mapa por meio do método _controller.setMapStyle (value);
.
Aqui está o resultado:
Modificando mapas com o widget GoogleMap
O widget GoogleMap
oferece bastante flexibilidade para modificar o mapa. Vamos explorar algumas maneiras de fazer isso.
Alterar o mapa tipo
Existem vários tipos de mapas disponíveis, incluindo satélite, terreno e híbrido. Você pode simplesmente definir o tipo desejado para a propriedade Ativando meu botão de localização Por padrão, o mapa mostrará o local fornecido no parâmetro Um pequeno ponto azul aparecerá na tela quando o dispositivo estiver parado e uma divisa se o dispositivo estiver em movimento. Criação de marcadores no mapa Os marcadores são uma ótima maneira de mostrar a localização de um determinado item. Para ver como criar marcadores em seu mapa, consulte o código abaixo: Cada marcador no conjunto espera alguns parâmetros, que são úteis para transmitir a informação. O primeiro marcador recebe a Ativando o modo de tráfego Você pode ativar o modo de tráfego simplesmente definindo o valor de Digamos que você queira mostrar uma lista de mapas exibindo marcadores para ajudar os usuários a localizar escritórios satélite, outros hospitais etc. Primeiro, crie um Crie um conjunto de marcadores e certifique-se de ter uma posição diferente atribuída a ele. At the time of writing, this feature is only available for Android. The ability to take a snapshot of your location and quickly share your journey with others is a really cool feature. First, create a button somewhere in your app. The Next, create a widget to show the snapshot: É isso! The full code can be found on GitHub. In this tutorial, we showed how to integrate Google Maps in your Flutter app and explored some ways to customize your map’s look and feel. We walked through how to enable the Maps API, generate and restrict API keys, and set up, style, and modify maps in a Flutter application. Adding Google Maps capabilities to your app opens up a world of possibilities. With the basics under your belt, you’re ready to start building location-based features and interactive maps into your Flutter app. The post Adding Google Maps to a Flutter app appeared first on LogRocket Blog. mapType
do widget: GoogleMap ( initialCameraPosition: _kInitialPosition, onMapCreated: onMapCreated, mapType: MapType.satellite,
);
initialCameraPosition
do widget (ou qualquer outro local que você fornecer ao mapa de forma programática). Se o usuário quiser retornar à sua localização, definir myLocationEnabled
como true
fará o trabalho. GoogleMap ( initialCameraPosition: _kInitialPosition, onMapCreated: onMapCreated, myLocationEnabled: true,
);
Definir
infowindow
, que mostra seu ID (você pode escrever qualquer coisa aqui para descrever o lugar) e uma rotação
de 90 graus. O parâmetro rotação
é muito útil quando você tem vários marcadores no mesmo lugar-por exemplo, várias antenas de célula em uma única torre. GoogleMap ( initialCameraPosition: _kInitialPosition, onMapCreated: onMapCreated, marcadores: _createMarker (),
);
trafficEnabled
como true
. GoogleMap ( initialCameraPosition: _kInitialPosition, onMapCreated: onMapCreated, trafficEnabled: true,
);
Mostrando uma lista de mapas
GridView
para mostrar uma lista de Widgets do Google Maps. Você pode definir initialCameraPosition
. Defina liteModeEnabled
como true
. Isso cria a imagem de um mapa com o qual você não pode interagir: GridView.count ( crossAxisCount: 2, crossAxisSpacing: 8, mainAxisSpacing: 8, //Gere 100 widgets que exibem seu índice na Lista. filhos: List.generate (10, (índice) { Centro de retorno ( filho: GoogleMap ( initialCameraPosition: _kInitialPosition, marcadores: _createMarker (), liteModeEnabled: true, ), ); }),
)
Definir
Taking a snapshot
_controller.takeSnapshot()
method will do the rest of the magic for you with the click of a button.FloatingActionButton( onPressed: () async { final imageBytes=await _controller.takeSnapshot(); setState(() { _imageBytes=imageBytes; }); }, child: Icon(Icons.fullscreen),
)
Container( decoration: BoxDecoration(color: Colors.blueGrey[50]), height: 150, width: 120, child: _imageBytes !=null ? Image.memory(_imageBytes): null,
)
Conclusion