WebView turning white/blank

Question

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

Following is the code to display the WKWebView in App:

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 when I try to interact with Map like zoom-in zoom out or scrolling then my map in app becomes white. Map works fine in web browser without resulting in white screen.

Is there a way to get to know the issue behind this? How to fix this problem?

Answer 1

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

One of possible solutions is to add Marker Clustering to your html/javascript code. You can follow official google maps documentation to add it.

Official google maps marker clusterer library repository is here.