Su guía definitiva para el SDK de Google Maps en iOS, con Swift 4

Muchas aplicaciones de iOS utilizan Google Maps. Esta es una característica muy común, por lo que he decidido preparar una guía definitiva sobre el SDK de Google Maps para iOS. Este tutorial cubre todo lo que pueda necesitar saber.

Espero que mis lectores soliciten funciones para poder ampliar este artículo. ¡Todo quedará documentado en este post! ?

Instalación

Antes de comenzar a codificar, primero debemos instalar el SDK de iOS de Google Maps. Es posible que prefiera algún otro administrador de dependencias, pero recomendaría CocoaPods.

Crea un Podfile dentro del directorio raíz de tu proyecto y copia el siguiente código:

source '//github.com/CocoaPods/Specs.git'target 'YOUR_TARGET_NAME' do pod 'GoogleMaps'end

Todo lo que necesita hacer es cambiar la cadena YOUR_TARGET_NAME con un valor real. Guarde el archivo y ciérrelo. Abra la terminal y cd al directorio raíz del proyecto, luego escriba pod install. ¡Listo! ?

Obtén una clave API

Para utilizar el SDK de Google Maps para iOS, necesitará una clave API. Para generar la clave, deberá visitar la Consola API de Google.

Cree un proyecto y navegue hasta 'Credenciales'.

Luego, haga clic en 'Generar credenciales'y elija API Key. Deberá proporcionar su ID de paquete de proyectos. La clave es generada por el ID de paquete único, así que si se cambia, los servicios de Google Maps no funcionarán .

Ve a tu proyecto y en tu AppDelegate.swiftclase agrega import GoogleMaps. Luego, copie el siguiente código aapplication(_:didFinishLaunchingWithOptions:)

GMSServices.provideAPIKey("YOUR_API_KEY")

Step 1 — Add a map

Comenzaré mostrándote cómo configurar el mapa junto con un marcador básico. El código que verá aquí se prueba en paralelo mientras escribo.

¡Empecemos! ?

Visite su UIViewController (donde debe agregar el mapa). Cree una UIView personalizada con el tamaño que necesita. Asigne la GMSMapViewclase como una clase personalizada a UIView (vea la captura de pantalla a continuación). Además, no olvide conectar al delegado.

¡Finalmente, algo de código!

Volvamos al UIViewController y escribamos código. ⌨️

️En el siguiente fragmento, agregué toda la clase para que puedas tener una mejor idea de lo que está sucediendo.

GMSCameraPositionle dice al mapa qué coordenadas tomar como punto central. Para mostrar un marcador simple en el mapa, use la showMarker()función.

Al final del archivo, agregue una extensión que “almacenará” los GMSMapViewDelegatemétodos que necesitamos.

Paso 2: delegar métodos

Ahora les presentaré algunos GMSMapViewDelegatemétodos y sus poderes. ✊

Ventana de información de GMSMarker

En Google Maps, una ventana de información es una ventana emergente con información adicional sobre una ubicación determinada. Se muestra cuando el usuario toca el marcador que agregamos arriba.

Nuestra InfoWindow es personalizable. Puede adjuntar su propia UIView con los componentes que necesite.

He escrito una implementación de ejemplo. Esto supone que en la mayoría de los casos las personas usarán una ventana de información personalizada,

  • didTapInfoWindowOf() detecta cuando el usuario toca la ventana de información.
  • markerInfoWindow() agrega la UIView personalizada que queremos mostrar al marcador.
  • didLongPressInfoWindowOf() detecta cuando se ha pulsado durante mucho tiempo la ventana de información.

Arrastre GMSMarker

Otra característica interesante de GMSMapViewDelegate es la capacidad de arrastrar el marcador. Esto se puede lograr con una cantidad mínima de código.

Todo lo que tienes que hacer es encender el "interruptor", llamando marker.isDragabble=trueal marcador creado arriba.

Para arrastrar el marcador, necesitará presionar prolongadamente. Si necesita que se le notifique cuando el usuario comience y termine de arrastrar, puede implementar estos tres métodos de delegado:

  • didBeginDragging notifica una vez: cuando ha comenzado el arrastre.
  • didDrag notifica mientras se arrastra el marcador.
  • didEndDragging notifica una vez - cuando el arrastre ha terminado.

Posición de GMSMarker

¿Qué sucede si necesita cambiar la GMSMarkerposición mientras el usuario toca el mapa? Bueno, también GMSMapViewDelegateofrece una solución para eso. Un solo método de delegado puede interceptar las coordenadas (latitud y longitud) del área tocada. Luego asignará sus valores al marcador.

  • didTapAt() devuelve la coordenada del área tocada en el mapa

Paso 3: agregar formas

El SDK de Google Maps para iOS hace que sea sencillo dibujar una forma. Cubriré cómo dibujar con polilíneas, polígonos y círculos.

Polilíneas

Las formas se pueden construir usando líneas. Podemos dibujar líneas en Google Maps usando 'polilíneas'. El objeto que nos ayudará con el dibujo se llama GMSPolyline.

Para crear una polilínea, deberá crear una ruta usando GMSMutablePath. Necesita dos o más puntos para comenzar a crear una ruta.

If you have used the above example, you will get a rectangular shape like the one shown.

Some other useful tips:

  • To remove a polyline from the map, call mapView.clear().
  • You can change the color of the line by using polyline.strokeColor=.black.
  • Change the width of the line by calling polyline.strokeWidth=3.

Polygon

Polygon is almost the same as polylines. It works using the same approach, with a few minor differences.

For example, GMSPolygonwill draw a shape. You can then use fillColor to fill in the drawn area. Here is an example of what this looks like.

Radius (circle)

The final shape we will look at is a circle. This is probably the easiest shape of all, since it’s always the same!

To achieve this, we need to use theGMSCircle class. Here, we are not passing a path. Instead, we use one coordinate to specify the circle’s center. We also define a radius (measured in meters).

TheGMSCircle class contains the same properties as the polygon, includingfillColor , strokeColor and strokeWidth.

Step 4 — Properties and Settings

This part will cover a few properties and settings that are often used when using Google Maps in your app. Let’s take a look at them.

Change marker icon

The GMSMarkercontains two different properties for changing the marker icon.

  • marker.icon=UIImage(named: "image.png") in this approach, you pass an image filename. This replaces the default one.
  • marker.iconView=customView You can also add a custom view instead of an image. This can be used for more complex markers. For example, you may want to add some animation, or multiple components (instead of a single image). Note the icon property gets overwritten when iconView is called.

Add ‘My Location’ button

The ‘My Location’ button appears in the bottom right corner. Clicking the button will animate the map to show the user’s current location.

To add this, set mapView.settings.myLocationButton = true. The button will appear.

Zoom controls

Google Maps SDK for iOS doesn’t provide inbuilt zoom controls (but the Android SDK does). You will need to write your own logic instead.

All you need to do is add two buttons with ‘+’ and ‘-’ icons. When tapped, these will call mapView.animate(toZoom: zoom).

Control gestures

You can turn on or off any gesture that you can see on the map. For example, you might want to disable zooming, or turn off scrolling.

There are a total of four gestures available to you:

mapView.settings.scrollGestures = falsemapView.settings.zoomGestures = falsemapView.settings.tiltGestures = falsemapView.settings.rotateGestures = false

I hope that you have enjoyed this tutorial. If you want to read more on Google Maps SDK for iOS, write me a comment. I would be very happy to expand this tutorial with your requests.

That’s it from this tutorial and if it helped you please ? or share this story so others like you can find it. Thank you for your attention! ?

Check out my latest project:

‎1x2 BET - Soccer Tips & Odds

‎HOT ODDS Each day, we generate a list of the hottest odds in the world. These are odds that have dropped the most…apple.co

Read more of my writing on Medium:

Introducing Clean Swift Architecture (VIP)

Forget MVC, now!hackernoon.comYour ultimate guide to the Google Maps SDK on iOS, using Swift 4

Many iOS apps use Google Maps. This is a very common feature, so I have decided to prepare an ultimate guide on the…medium.freecodecamp.orgSWIFT — Custom UIView with XIB file

Custom UIView with XIB file is a very common practice in iOS Development. Custom UIView classes don’t contain XIB files…medium.comHow to add Spotlight support to your iOS app

A Swift tutorial that will make your app available in Spotlight searchhackernoon.comCore Data Relationships

Understanding One-to-One and One-To-Many relationshipshackernoon.comUnderstanding Auto Layout in Xcode 9

All you need to know about Auto Layouthackernoon.com

Subscribe to my Newsletter: