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
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
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