Using google maps cordova plugin

ionic-v1
41

@wf9a5m75 Well, I created this repository with an Ionic Side Menu Template, you will have to install your plugin and test it, the bundle identificator is com.test.test but you can change it.

The map will appear at the app start.

Also, you will have to create the platforms folder.

42

@xMarston, @ascended
Thank you. I will check it later (Iā€™m working on my real job).
Let me take a time.

1 Like
43

Not ideal, but Iā€™m using the older version in my project to avoid the menu problem:

cordova plugin add https://github.com/wf9a5m75/phonegap-googlemaps-plugin.git#v1.1.5 --variable [...]
44

@kimlima i use

cordova plugin add GitHub - mapsplugin/cordova-plugin-googlemaps: Google Maps plugin for Cordova --variable [ā€¦]

but the map disappear

45

Just wanted to add that, even in the ā€œTabsā€ version of Ionic starter, once the Map goes behind/below the tabs at the bottom, the tabs stop working, and tapping on the tab button or icon will control the map (thatā€™s underneath) insteadā€¦

46

Hi,

I use SideMenu and got similar problem as above.

Temporary solutions for 1.2:

  • use FullScreen Map (map.showDialog())

  • hiding the sidemenu dynamically:
    document.getElementById(ā€œside-menuā€).style.visibility=ā€œhiddenā€; (where side-menu is the id of my ion-side-menu)
    You can then override the Back Button click of your map to call visibility=ā€œvisibleā€ for your side-menu

But I got some issues/questions with 1.2 :

1) Markers :

when I use Base64, I got weird things : I got valid Base64 Images but depending on the image the result is not the same:

null exception, Image taking full height of the map, ā€¦

With Url : no exceptions but no markers

2) Circles : https://github.com/wf9a5m75/phonegap-googlemaps-plugin/wiki/Circle

In the example, you use :

map.addCircle({
  'center': GOOGLE,
  'radius': 300,
  'strokeColor' : '#AA00FF',
  'strokeWidth': 5,
  'fillColor' : '#880000'
});

We can see a beautiful red circle on the website and they are ā€œtransparentā€ (we can see the map)
I donā€™t know if this is due to 1.2 but all my circles are never transparent (they hide the map)

I will do some tests on 1.15 version today to verify if the new version breaks things.

Does anyone encounter similar issues?

47

I am using the sample code from https://github.com/wf9a5m75/phonegap-googlemaps-plugin/wiki/Map, But getting a black screen on on my phone, but when click on full screen, the map appeared, any idea?

View code:

   <ion-content>
 <div id="map_canvas">
   <div id="searchBox">
     <input type="text" id="query" size="30" />
     <button id="searchBtn">Search</button>
  </div>
 </div>
  </ion-content>

Controller code
// Define a div tag with id="map_canvas"
var mapDiv = document.getElementById(ā€œmap_canvasā€);

  // Initialize the map plugin
  var map = plugin.google.maps.Map.getMap(mapDiv);

  map.on(plugin.google.maps.event.MAP_READY, onMapInit);
48

@boopage

What are map_canvas css properties?
Give it height and width if itā€™s not already the case.

And try this to initialize :

  var map = plugin.google.maps.Map.getMap(); 

  map.addEventListener(plugin.google.maps.event.MAP_READY, function onMapInit(map) {
         ...
         var mapDiv = document.getElementById("map_canvas");
         map.setDiv(mapDiv);
  });
49

@xMarston Sorry for late reply.
I was really busy these days.

So I confirmed what the problem. The ionic places the sidebar under the contents div tag.
https://googledrive.com/host/0B1ECfqTCcLE8SVJLc2VWZHV3dWM/ionic_sidebar.gif

Iā€™m sorry, this is out of the scope I expected.
This problem occurs by phonegap-googlemaps-plugin, because the map plugin changes the background color to transparent.
Because the map view places under the browser, so the browser must be transparent.
https://googledrive.com/host/0B1ECfqTCcLE8R0h6T3dIdWFBOHM/mechanism.png

Is there any way to place the sidebar OVER the contents page?
(Sorry Iā€™m not familiar with ionic framework)

Edit: @Melina comes up with another solution.
He/She changes the visibility of the CSS. Thatā€™s one of the right way. Please try it, @xMarston.

50

How did you write the code?

51

@Melina,

  1. Marker
    Could you share me your code using Github (or Gist), or show me the base64 encoded string?

  2. Circle
    Ah, sorry. I change the behavior of addCircle().
    Yes I set the opacity for any colors with 0.75 (75%) as default.
    But it causes the different color than the developer expected.
    I will fix this issue in v1.2.2. Please wait.
    In the meantime, you can specify using rgba(255, 0, 0, 0.75) or #FF000096

By the way, if you tell me on the pluginā€™s github page, I will reply more quickly.

@boopage
I need more information, Could you share your whole code using Github (or Gist) with me?

52

@wf9a5m75

Concerning the solution of hiding sidemenu, itā€™s maybe not the perfect solution.

I donā€™t know if itā€™s the map or the hiding of the sidemenu, but my app freeze and crash with no reason after multiple use

  1. Markers

I have found the problem :

map.addMarker({
  'position': GOOGLE_TOKYO,
  'title': 'Google Tokyo!'
  'icon': 'http://.../image.png'
});

don't work

    map.addMarker({
      'position': GOOGLE_TOKYO,
      'title': 'Google Tokyo!'
    }, function(marker) {
      marker.setIcon({
        'url': 'http://.../image.png',
        'size': {
          width: 75,
          height: 75
        }
      });
    });

works :slight_smile:

And for base64, when I define a canvas to create a custom image and then call canvas.toDataURL()
If I give my canvas an height and width, itā€™s okay !
In the new version of your map, it seems that height/width need to be set

Your plugin is impressive, thank you for this, itā€™s a good job and itā€™s so fast :smiley:
I was comparing it to Javascript Google Maps. The speed difference is so huge in my phone.

53

@Melina Thank you for your report.
I confirmed a bug of the icon property, then fixed it.

You can test it from the test branch.
$> cordova plugin add https://github.com/wf9a5m75/phonegap-googlemaps-plugin#test --variable ...

54

Sorry no luck, still getting black screen :frowning:

55

@boopage Can you show me the screen capture?

56

The map_canvas is just black :ļ¼ˆ

57

Also having the side menu issue, can we have some sample code how to fix the side menu issue?

Thanks

58

Have you already solved the black page issue?

59

Hi,

Itā€™s fixed by wrapping one of my ion-nav-view into ion-tab, but I have no idea why, and Iā€™m still having the side menu problem too : (

Thanks

60

Hi, this is my solution for side menu and google maps plugin,
works fine,
map tabs detects and captures the image with map.toDataURL.
The only problem is that this code is executed when you click on the menu button
but not how to detect that the SIDEMENU has been closed to run the same code and delete the image, for example when it is drag for close.
Bye!!

.controller('NavCtrl', function($scope, $ionicSideMenuDelegate,$rootScope,$timeout,LoaderService) {
  
  $scope.showRightMenu = function () {
	if($ionicSideMenuDelegate.isOpenRight()){
		$ionicSideMenuDelegate.toggleRight();
		if($rootScope.sectionmap){
		LoaderService.show(1);
		$timeout(function(){
			document.getElementById("side-menu").style.visibility="hidden";
			
			var image = document.getElementById("snapshot");
			image.parentNode.removeChild(image);
			LoaderService.hide(1);
			$rootScope.map.setClickable( true );
		},300);
		}
	}
	else{
		if($rootScope.sectionmap){
		
		$rootScope.map.setClickable( false );
		$rootScope.map.toDataURL(function(imageData) {
		  var img = document.createElement('img');
		  img.src = imageData;
		  img.id = "snapshot";
		  document.getElementById("map_canvas").appendChild(img);
	 	$timeout(function(){document.getElementById("side-menu").style.visibility="visible";$ionicSideMenuDelegate.toggleRight();},100);
		});
		}else{
        $ionicSideMenuDelegate.toggleRight();
        }
		
	}
   }
	
  
})
3 Likes