InAppBrowser with Google Maps External Link


#1

Hi everyone

Somewhat new here to Ionic and Angular.

Was wondering if there is an Angular way or code snippet to trigger InAppBrowser for the links for Google Maps (map-canvas)? The problem being is that every time Terms of Use and Map Data © 2014 Google is clicked, the external browser launches and the App itself can no longer “go back” to its original state.

I know how to do this in jQuery, but i can’t find any topics online related to Angular.

The jQuery method looks like this:

        $(document).on("click", "a[href^=http], a[href^=https]", function(e) {
        e.preventDefault();
        var $this = $(this);
        var target = $this.data("inAppBrowser") || "_blank";
        window.open($this.attr("href"), target, "location=yes");
    });

Thank you.

Regards
Tze Yang


#2

Working on this, even the android hardware back button doesn’t return to the app i tried something similar to this but it didn’t work this is my current code:

var anchors = document.getElementsByTagName("a");
		for (var i=0; i<anchors.length; i++)
		{
			console.log(i);
			anchors[i].addEventListener("click", openinAppBrowser);
		
		}
		
		function openinAppBrowser(evt){
			evt.preventDefault();
			console.log('fired');
			console.log(this);
		}

EDIT

Seems the links in the google map aren’t registered, the only links i’m catching are my footer tabs with this code.

EDIT

This seems to work in the controller where my map is located, i use the timeout to wait till the map is loaded so it catches the links see this script:

$timeout(function(){
			var googlemap = document.getElementById("myGoogleMap");
			var anchors = googlemap.getElementsByTagName("a");
			for (var i=0; i<anchors.length; i++)
			{
				console.log(i);
				anchors[i].addEventListener("click", openinAppBrowser);
			
			}
			
			function openinAppBrowser(evt){
				evt.preventDefault();
				window.open(this.href, '_blank', 'location=yes');
				console.log();
			}
		},1500);

#3

Hi sjerd

Thanks for the prompt reply.

Here’s something I did based on your solution:

map = new google.maps.Map(document.getElementById("map-canvas"), mapDefaultOptions);
    /* Maps Successfully Loaded */
    google.maps.event.addListenerOnce(map, "idle", function () {
        console.log("Maps Loaded");
        //Run Some functions
        var googleMap = document.getElementById("map-canvas");
        var anchors = googleMap.getElementsByTagName("a");
        for (var i=0; i<anchors.length; i+=1)
        {
            console.log(i);
            anchors[i].addEventListener("click", openInAppBrowser);
        }

        function openInAppBrowser(e) {
            e.preventDefault();
            window.open(this.href, "_blank", "location=yes");
        }
    });

Works but doesn’t seem to be very robust. For some reason there’s a chance of triggering if the links are hit before they are fully loaded (especially when the line is slow).


#4

Hi Everyone

I’ve finalized with this solution.

    $ionicLoading.show({
       template: "Maps Loading..."
    });
	
	/* Standard Initialization codes here */
	//...
	
	/* Maps Successfully Loaded */
    google.maps.event.addListenerOnce(map, "idle", function () {
        console.log("Maps Loaded");
        //Prevent anchors in google maps from breaking App by launching these anchors using InAppBrowser
        var googleMap = document.getElementById("map-canvas");
        var anchors = googleMap.getElementsByTagName("a");
        for (var i=0; i<anchors.length; i+=1)
        {
            anchors[i].addEventListener("click", openInAppBrowser);
        }

        function openInAppBrowser(e) {
            e.preventDefault();
            window.open(this.href, "_blank", "location=no");
        }
        $ionicLoading.hide(); //Show Load Screen
    });

I’ve used $ionicLoading to make sure everything loads properly before user interaction.

Thanks.


#5

Hi

After testing the solution for a bit, I realized that only limited anchors were captured. Post maps load, any new POIs with external links will crash the application again. jQuery makes it very easy to fix, unfortunately I have no idea how to do this in angular.

Is there a way to capture all anchor hits in the map-canvas? Perhaps it would be better to act on all anchor hits instead.

Thank you.


#6

umm, i wouldn’t know since i don’t have poi’s enabled… i also use an angularjs directive for my google map instead of the standard one. here’s a link if you’re intrested https://angular-ui.github.io/angular-google-maps/#!/


#7

Hi sjerd

Again thanks for replying.

Some pictures to illustrate the kind of “Default” POI I’m talking about.

I’ve tried to capture all clicks and then try to get all anchors post “click” event, but the getElementsById always happens “Before” the info window loads.

Is there a way I can override the default anchor and trigger all anchor loads like the way jQuery was used above.

Thanks.


#8

Yoo found this while following @max on twitter: http://blog.nraboy.com/2014/12/open-dynamic-links-using-cordova-inappbrowser/