【Swift】GoogleMapでマーカーがチカチカ点滅・明滅する原因と対処法【Xcode/iOS】

2020年8月22日

GoogleMapにマーカー(GMSMarker)を複数表示すると、まれに以下のようにチカチカ明滅・点滅する事象に遭遇しました。

今回はその原因と対処法についてまとめています。

チカチカする原因

結論から言うと、同じ緯度・経度上に色または画像の違うマーカーを複数置くと、チカチカしてるように見えてしまいます。

チカチカするサンプルコード

    ///
    /// 色の違うマーカーを2つ作り、マップ上の同一地点に表示する
    func addMarkerOnMap(map: GMSMapView, lat: Double, lng: Double){
        let marker1 = createMarker(color: .gray)
        marker1.position = CLLocationCoordinate2D(latitude: lat, longitude: lng)
        marker1.map = map
        let marker2 = createMarker()
        marker2.position = CLLocationCoordinate2D(latitude: lat, longitude: lng)
        marker2.map = map
    }

    /// 色付きのマーカーを作成するメソッド
    private func createMarker(color: UIColor = .mainColor) -> GMSMarker{
        let marker = GMSMarker()
        let size = CGSize(width: 40, height: 40)
        // 「marker」と言う名前の画像があるこ
        let markerImage = UIImage(named: "marker")?.resizeScaleImage(scaledToSize: size).withRenderingMode(.alwaysTemplate)
        let markerImageView = UIImageView(image: markerImage)
        markerImageView.tintColor = color
        marker.iconView = markerImageView
        return marker
    }

addMarkerOnMapメソッドで、同じ地点に色の違うマーカーを表示しています。

この結果、上で示したようにチカチカしてしまいました。

対処方法

GMSMapMarkarクラスの zIndex プロパティ を指定して、マーカーの重なり順を指定します。

zIndex に大きい値を指定したマーカーが、他のマーカーよりも前に表示されるようになります。

改良後のコード

    ///
    /// 色の違うマーカーを2つ作り、マップ上の同一地点に表示する
    func addMarkerOnMap(map: GMSMapView, lat: Double, lng: Double){
        let marker1 = createMarker(color: .gray)
        marker1.position = CLLocationCoordinate2D(latitude: lat, longitude: lng)
        marker1.map = map
        marker1.zIndex = 0
        let marker2 = createMarker()
        marker2.position = CLLocationCoordinate2D(latitude: lat, longitude: lng)
        marker2.map = map
        // marker2をmarker1の上に表示している
        marker2.zIndex = 1
    }

上のコードでは、marker1（グレーのマーカー）のzIndexを0に、marker2のzIndexを1にすることで、グレーのマーカーが一番後ろに表示されるようにしています。

この結果、チカチカするような動作は解消することができました。