Google Maps integration into SwiftUI

Question

Im fairly new into programming with Xcode and SwiftUI and am having trouble integrating Google Maps into a SwiftUI project.

I added all the right API keys into my AppDelegate.swift file and have created a view called GoogMapView that i am trying to use to display an instance of Google maps. This is my code in the file GoogMapView:

import SwiftUI
import MapKit
import UIKit
import GoogleMaps
import GooglePlaces

struct GoogMapView : UIViewRepresentable {
    func makeUIView(context: Context) -> GMSMapView {
        GMSMapView(frame: .zero)
    }

    func updateUIView(_ view: GMSMapView, context: Context) {
        let camera = GMSCameraPosition.camera(withLatitude: -33.86, longitude: 151.20, zoom: 6.0)
        let mapView = GMSMapView.map(withFrame: CGRect.zero, camera: camera)
        view = mapView

        let marker = GMSMarker()
        marker.position = CLLocationCoordinate2D(latitude: -33.86, longitude: 151.20)
        marker.title = "Sydney"
        marker.snippet = "Australia"
        marker.map = mapView
    }

I keep getting an error at 'view = mapView' but everything i tried has failed. Any idea how to set this up so i can call it in a main view?

Basically did all the steps listed here to get the API key and stuff until step 5 — zlyt, Oct 02 '19 at 01:06
The `view` inside `updateUIView` is read-only - the map gets created in `makeUIView` and then passed to `updateUIView`. You're creating a second map for some reason (?) — Matteo Pacini, Oct 02 '19 at 04:40

score 8 · Accepted Answer · answered Oct 02 '19 at 22:36

I am also a new iOS developer. I was looking into the same thing and stumbled on your question. Since I am new to iOS, I can't claim it follows all the proper conventions, but this code works to display the map on the simulator with SwiftUI at a basic level. Solution is based on your code, and Matteo's observation.

import SwiftUI
import UIKit
import GoogleMaps

struct ContentView: UIViewRepresentable {
    let marker : GMSMarker = GMSMarker()

    /// Creates a `UIView` instance to be presented.
    func makeUIView(context: Self.Context) -> GMSMapView {
        // Create a GMSCameraPosition that tells the map to display the
        // coordinate -33.86,151.20 at zoom level 6.
        let camera = GMSCameraPosition.camera(withLatitude: -33.86, longitude: 151.20, zoom: 6.0)
        let mapView = GMSMapView.map(withFrame: CGRect.zero, camera: camera)

        return mapView
    }

    /// Updates the presented `UIView` (and coordinator) to the latest
    /// configuration.
    func updateUIView(_ mapView: GMSMapView, context: Self.Context) {
        // Creates a marker in the center of the map.
        marker.position = CLLocationCoordinate2D(latitude: -33.86, longitude: 151.20)
        marker.title = "Sydney"
        marker.snippet = "Australia"
        marker.map = mapView
    }

}

Thanks for adding to this! I actually found a way to get the google maps view to appear by calling GoogMapView() in another file before reading your comment. The code i used is in the comment below. I hope there is more documentation posted by Google on the 'proper' way to do this soon, but it looks like both our methods work! — zlyt, Oct 03 '19 at 00:38
struct GoogMapView : UIViewRepresentable { func makeUIView(context: Context) -> GMSMapView { let camera = GMSCameraPosition.camera(withLatitude: 42.361145, longitude: -71.057083, zoom: 16.0) return GMSMapView.map(withFrame: CGRect.zero, camera: camera) } func updateUIView(_ view: GMSMapView, context: Context) { let marker = GMSMarker() marker.position = CLLocationCoordinate2D(latitude: 42.361145, longitude: -71.057083) marker.title = "Boston" marker.snippet = "USA" marker.map = view } — zlyt, Oct 03 '19 at 00:39

score 0 · Answer 2 · edited Apr 08 '21 at 22:23

0

I had this problem so I changed the parameters to match.

func updateUIView(_ **view** GMSMapView, context: Self.Context) {

     marker.map = **view** }

edited Apr 08 '21 at 22:23

David Buck

3,752
35
31
35

answered Apr 08 '21 at 15:01

loanerr

1
1

Google Maps integration into SwiftUI

2 Answers2