Using google maps cordova plugin

ionic-v1
61

A question to everybody using this cordova plugin.
How is the performance in different android and ios devices? (old and new ones)

Also, the user experience with this plugin is way better than embedding a google maps iframe?

62

The angular map module is the easiest IMO. I went from knowing nothing about mapping to having markers displaying on a map in a few days with that one. I have not tried the others tho and performance is acceptable on all platforms

63

Tried this plugin and this was the output.

Anyone encounter this?

64

What’s the error in the chrome debugger?

65

The most reason of the blank map is your api key is wrong.
Read this page.

66

Thanks.

I replaced the API key with the web based and now works.

Is it possible to make the Marker snippet as html?

67

Not possible.
However you can change the design a little like css.
https://googledrive.com/host/0B1ECfqTCcLE8LUxUWmhsQmgxVVU/marker_text_styling.png

Or you can put your HTML on the map.
(You need to manage your custom HTML by yourself)

68

How can I stop the default info Window from showing then?

I have the addMarker with a callback function without calling the
marker.showInfoWindow();
but still the default info window shows.

Thanks

69

Can you show me your code?

70 
	map.addMarker({
	  title : Marker.name,
	  position : Position,
	  icon : Marker.marker,
	  snippet : Marker.description
	} , function( marker ) {
	  document.getElementById("info-window").className = "";
	});

That was inside with a angular.forEach in a a service function which I call to setup all the markers.

72

@leiron, thank you for waiting. I was super busy last week.
How about this code:

map.addMarker({
  'mytitle': Marker.name,
  'position': Position,
  'icon': Marker.marker,
  'mysnippet': Marker.description,
  'markerClick': function( marker ) {
    marker.setTitle(marker.get("mytitle");
    marker.setSnippet(marker.get("mysnippet");
    marker.showInfoWindow();
  }
}, function( marker ) {
  document.getElementById("info-window").className = "";
});
74

Hi everybody. I had some issues using the plugin with a tabbed interface. Since ionic recreates the DOM on every tab switch, the map dissapeared.
To solve it I came up with a workaround which reconnects the map back to the new DIVs every time you switch back to the map tab.
Please see https://github.com/wf9a5m75/phonegap-googlemaps-plugin/issues/256

Hope this helps anybody, and if you spot some mistake let me know

Ramiro

1 Like
75

I have a page with a collection-repeat list, on the top is the map, when I scroll the page, the map will scroll up, and clicking on my header links won’t have any effect, but the map respond to the event even the map is under the header tab, any workaround?

Thanks

76

@boopage Could you share your project with me?
It seems there is some problem for the touch detection, but I can not give you any advice without investigation for your case.

77

Hi,
This is my implementation for a marker appears on the map with animation, works great, just what I’ve done for iOS, does anyone know how to do it for Android?

File googlemaps-cdv-plugin.js:

Line 764 Add

markerOptions.appearanimation = markerOptions.appearanimation || false;

Line 1154 Add

Marker.prototype.setAppearAnimation = function(appearanimation) {
this.set('appearanimation', appearanimation);
cordova.exec(null, this.errorHandler, PLUGIN_NAME, 'exec', ['Marker.setAppearAnimation', this.getId(), appearanimation]);
};

File marker.m:

Line 32 Add

if ([[json valueForKey:@"appearanimation"] boolValue] == true) {
marker.appearAnimation = kGMSMarkerAnimationPop;
}

Example of use:

map.addMarker({
'position': latlon,
'icon': icon,
'appearanimation': true,
}
78

Is there any way to place the map over the browser?

79

Use v1.1.5.

$>cordova plugin add https://github.com/wf9a5m75/phonegap-googlemaps-plugin#v1.1.5 --variable ...
80

drewrygh suggested this solution to the side menu problem, and this worked great for me:

  1. use ng-hide on the ion-side-menu element:

    <ion-side-menu side=“left” ng-controller=“MenuCtrl” ng-hide=“hideLeft” >

  2. and then in the controller check if the menu is open(ed).

    .controller(‘MenuCtrl’, [’$scope’, ‘$ionicSideMenuDelegate’, function($scope, $ionicSideMenuDelegate) {
    $scope.$watch(function(){
    return $ionicSideMenuDelegate.getOpenRatio();
    }, function(newValue, oldValue) {
    if (newValue == 0){
    $scope.hideLeft = true;
    } else{
    $scope.hideLeft = false;
    }
    });
    }])

4 Likes
81

Hi,
Thanks for this plugin.
Could you please tell me the for which version of Android this plugin is supported?

82

Hi !

I really need add html code in infowindow, even if i change java code, i tried to change this for convert plain text to html code but he didn’t work. Can you help me please ?

Thanks