Customised Google Maps Integration iOS

Posted By : Vasu Saini | 22-Jun-2017

Today we will learn how to customize google maps appereance in iOS Application , theme , text colors , landmarks colors etc. as uber shows silver map appereance as shown in map on link below

https://www.uber.com/en-IN/ride/uberblack/

Step 1. First of all Simply implemet Google Maps in your Project if you don't know refer link given below

https://developers.google.com/maps/documentation/ios-sdk/start

Step 2. After Implementing Google maps , our next work is to customize it, for customize it we have to go to  Google map styling Wizard 

Open the link given below for GMap Styling wizard

Step 3. Select theme you want to use in your application for ex silver, dark etc given
click on "more options" for change text colors of locals, or landmarks names or go through whole options given.

Step 4. Now click on "finish", here a JSON is created , copy that JSON. 
Step 5. Now paste the JSON as Done in the following Code in the view controller class in which google maps is going to implement as follows.

import UIKit
import GoogleMaps

let kMapStyle = "[" +
"  {" +
"    \"featureType\": \"poi.business\"," +
"    \"elementType\": \"all\"," +
"    \"stylers\": [" +
"      {" +
"        \"visibility\": \"off\"" +
"      }" +
"    ]" +
"  }," +
"  {" +
"    \"featureType\": \"transit\"," +
"    \"elementType\": \"labels.icon\"," +
"    \"stylers\": [" +
"      {" +
"        \"visibility\": \"off\"" +
"      }" +
"    ]" +
"  }" +
"]"
class ViewController: UIViewController {

  // Set the status bar style to complement night-mode.
  override var preferredStatusBarStyle: UIStatusBarStyle {
    return .lightContent
  }

  override func loadView() {
    let camera = GMSCameraPosition.camera(withLatitude: -33.86, longitude: 151.20, zoom: 14.0)
    let mapView = GMSMapView.map(withFrame: CGRect.zero, camera: camera)

    do {
      // Set the map style by passing a valid JSON string.
      mapView.mapStyle = try GMSMapStyle(jsonString: kMapStyle)
    } catch {
      NSLog("One or more of the map styles failed to load. \(error)")
    }

    self.view = mapView
  }
}

Step 6. Now Run your implemnted google maps, this added JSON effect your maps to corrosponding customized Apperance.

 

Thanks

 

About Author

Author Image
Vasu Saini

Vasu Saini is Passionate to deploy ideas into real world, Have zeal to learn new technologies. working as iOS Developer in Oodles Technologies. Sports Freak, Calisthenics ,Parkour, Love to play football, swimmer, athletics etc

Request for Proposal

Name is required

Comment is required

Sending message..