web-dev-qa-db-fra.com

Google Maps GMSMapView sur UIView personnalisé

Je souhaite afficher Google Maps sur une vue qui est ensuite ajoutée à self.view, plutôt que de dessiner la carte directement sur self.view. Par conséquent, j'ai créé une vue dans le storyboard et changé sa classe en GMSMapView. J'ai également créé une connexion de sortie à cette vue appelée gmView.

J'utilise le code suivant qui n'affiche malheureusement pas la carte:

let mapView = GMSMapView.map(withFrame: CGRect.zero, camera: GMSCameraPosition.camera(withLatitude: 51.050657, longitude: 10.649514, zoom: 5.5))
gmView = mapView

J'ai également essayé d'ajouter le mapView à self.view comme une sous-vue, comme ceci:

self.view.addSubview(mapView)

... et en l'insérant:

self.view.insertSubview(mapView, at: 0)

Notez que j'utilise la disposition automatique si cela change quelque chose.

Aucune de ces approches ne semble fonctionner pour moi.
Des idées?

iosswiftgoogle-mapsuiview
13
LinusGeffarth

Si vous souhaitez ajouter un mapView après le chargement du view, vous devez créer un objet de GMSMapView. Brisez donc les prises de votre mapView car il sera créé dynamiquement.

import UIKit
import GoogleMaps

class MapViewController: UIViewController {

    //Take a Google Map Object. Don't make outlet from Storyboard, Break the outlet of GMSMapView if you made an outlet
    var mapView:GMSMapView?

    override func viewDidLoad() {

        super.viewDidLoad()

        mapView = GMSMapView.map(withFrame: CGRect(x: 100, y: 100, width: 200, height: 200), camera: GMSCameraPosition.camera(withLatitude: 51.050657, longitude: 10.649514, zoom: 5.5))

        //so the mapView is of width 200, height 200 and its center is same as center of the self.view
        mapView?.center = self.view.center

        self.view.addSubview(mapView!)

    }
}

Voici la sortie. mapView a une largeur = 200 et une hauteur = 200 avec un centre identique à self.view

enter image description here

25
Rajan Maheshwari

J'ai finalement compris comment afficher la carte dans une UIView créée dans Storyboard et la centrer dans un emplacement spécifique.

Remarque: Après avoir créé la sortie UIView, j'ai changé sa classe en GMSMapView comme expliqué précédemment.

import UIKit
import GoogleMaps

class ViewController: UIViewController {

    @IBOutlet weak var searchBar: UISearchBar!
    @IBOutlet weak var toolBar: UIToolbar!
    @IBOutlet weak var mapView: GMSMapView!

    override func viewDidLoad() {

        super.viewDidLoad()

        let camera = GMSCameraPosition.camera(withLatitude: 52.520736, longitude: 13.409423, zoom: 12)
        self.mapView.camera = camera

        let initialLocation = CLLocationCoordinate2DMake(52.520736, 13.409423)
        let marker = GMSMarker(position: initialLocation)
        marker.title = "Berlin"
        marker.map = mapView

    }

Et voici la sortie: Carte centrée à Berlin

24
celiux

Vous pouvez positionner une UIView vierge dans votre mise en page et définir sa classe dans l'inspecteur en tant que GMSMapView. Vous n'aurez pas besoin de l'instancier par programme.

Ensuite, obtenez simplement une référence via la sortie à la vue et définissez vos coordonnées/caméra.

6
mylovemhz

Très simple. Utilisez les étapes suivantes

1) Ouvrir le Storyboard: déposez une UIView de la bibliothèque d'objets dans votre ViewController.

2) Créez une sortie de vue personnalisée dans votre classe. (viewForGMap dans mon code)

3) Ajoutez la ligne suivante pour le code dans votre classe.

class GMapVC: UIViewController {

@IBOutlet weak var viewForGMap: UIView!

override func viewDidLoad() {
    super.viewDidLoad()

    // Do any additional setup after loading the view.

    let camera = GMSCameraPosition.camera(withLatitude: 28.7041, longitude: 77.1025, zoom: 10.0)
    let mapView = GMSMapView.map(withFrame: self.viewForGMap.frame, camera: camera)
    self.view.addSubview(mapView)

    // Creates a marker in the center of the map.
    let marker = GMSMarker()
    marker.position = CLLocationCoordinate2D(latitude: 28.7041, longitude: 77.1025)
    marker.title = "Delhi"
    marker.snippet = "India’s capital"
    marker.map = mapView

   }

enter image description here

Production:

enter image description here

6
Devendra Singh

Voici un moyen très simple de connecter Google Maps à un View dans votre ViewController dans un storyboard (Swift 4.2, Xcode 10).

J'appelle mon ViewControllerMapLocationsViewController.

  1. Donc, dans votre storyboard, assurez-vous que la classe de votre ViewController fait correctement référence à votre classe correcte (MapLocationsViewController pour moi dans cet exemple). Step 1

  2. Ensuite, faites glisser un objet View sur ce ViewController et définissez cette classe sur GMSMapView. Step 2

  3. Accrochez cet objet View à un @IBOutlet dans votre code (que j'ai nommé viewForGoogleMap dans mon exemple). Step 3

Voici un exemple de code minimaliste:

import UIKit
import GoogleMaps
class MapLocationsViewController: UIViewController {
    @IBOutlet weak var viewForGoogleMap: GMSMapView!
    override func viewDidLoad() {
        super.viewDidLoad()
        let mapView = GMSMapView(frame: self.view.bounds)
        viewForGoogleMap.addSubview(mapView)
    }
}

Pour plus d'informations, consultez le Google Maps docs .

2
user3773048

CGRect.zero renverra une vue avec une hauteur et une largeur nulles. Ce sera invisible.

De plus, cela n'a pas vraiment de sens de l'ajouter au storyboard si vous voulez faire votre propre allocation. À la place, vous devez simplement créer une propriété du contrôleur de vue par programme et définir son cadre pour qu'il soit celui que vous souhaitez.

Notez que lorsque vous appelez 'addSubview' à une vue, elle sera toujours ajoutée en haut de la vue, il n'est donc pas nécessaire de l'insérer à un index donné. L'utilisation de la mise en page automatique est bonne, mais viewDidLoad () est appelé avant que toutes les contraintes ne soient définies. Si vous voulez pouvoir définir frame = self.view de votre mapView, vous devriez le faire dans viewDidAppear () à la place.

1
Brad Hesse

Nous pouvons utiliser zPosition dans iOS.

Si nous avons une vue nommée salonDetailView, par exemple:

@IBOutlet weak var salonDetailView: UIView!

dans mon cas voir l'image

et avoir UIView pour GMSMapView, par exemple:

@IBOutlet weak var mapViewUI: GMSMapView!

Pour afficher salonDetailView en haut de la mapViewUI, utilisez zPosition comme ci-dessous:

salonDetailView.layer.zPosition = 1
0
abhijith k