WebView turns white / blank

Question

I am using WKWebView to display Google maps in my application. This is the URL: http://ec2-54-198-148-171.compute-1.amazonaws.com/map_question.html

Below is the code to display WKWebView in the application:

import UIKit import WebKit import Foundation class MyMapController: UIViewController, UIScrollViewDelegate, WKScriptMessageHandler { var webViewGeo: WKWebView? var WidgetView:UIView = UIView() override func loadView() { super.loadView() let contentController = WKUserContentController(); contentController.addScriptMessageHandler( self, name: "callbackHandler" ) let config = WKWebViewConfiguration() config.userContentController = contentController self.webViewGeo = WKWebView( frame: self.WidgetView.bounds, configuration: config ) self.WidgetView = self.webViewGeo! } override func viewDidLoad() { super.viewDidLoad() let frame = CGRect(x:0, y:-20, width:self.view.bounds.width, height:self.view.bounds.width) WidgetView.frame=frame let url = NSURL(string:"http://ec2-54-198-148-171.compute-1.amazonaws.com/map_question.html") let req = NSURLRequest(URL:url!) self.webViewGeo!.loadRequest(req) self.view.addSubview(WidgetView) } } 

The problem is that when I try to interact with Map, for example, scalable reduction or scrolling, my map in the application turns white. The map works great in a web browser without leading to a white screen.

Is there any way to find out about this? How to solve this problem?

Answer 1

The problem is not WKWebView, the link you are trying to download has 2k + markers that overload MapView even on Chrome Browser on PC, and this is the source of your problem.

One possible solution is to add Marker Clustering to your html / javascript code. You can use the official Google Maps documentation to add it.

The official google maps map cluster cluster repository is here .