CODEWITHSUNDEEP
cordovagoogle-maps
Keerthivasan
Keerthivasan

Reputation: 12880

Cannot click on the button overlay on google maps

I'm creating an application which uses google-maps cordova plugin. I'm creating a map inside a div map_canvas

var mapDiv = document.getElementById("map_canvas");
      // Initialize the map plugin
      var map = plugin.google.maps.Map.getMap(mapDiv);
      $scope.mapobj = map;
      // You have to wait the MAP_READY event.
      map.on(plugin.google.maps.event.MAP_READY, onMapInit);
      var LOCATION;

      function onMapInit(map) {
        map.clear();
        LOCATION = new plugin.google.maps.LatLng( $scope.lat,$scope.longi);
        map.setMapTypeId(plugin.google.maps.MapTypeId.ROADMAP);
        map.animateCamera({
          'target': LOCATION,
          'zoom': 18
        });
        map.addMarker({
          'position': LOCATION,
          'title': $scope.markertitle,
          'animation': plugin.google.maps.Animation.DROP
        }, function (marker) {
          marker.showInfoWindow();
        });
      }

I have put a button inside the map div. But, that button is not clickable. but, when I make the map unclickable, 

map.setClickable(false);

the button starts to work. But, I also want to have the map clickable. so, the users would be able to move the map to take a better look at the routes. Why is the map not allowing the button to be clickable? I like to gain more information on the behind scenes. The other work around I have thought is to reduce the height of the map div and put the button below it.

enter image description here

Upvotes: 1

Views: 3057

Answers (3)

Zahema
Zahema

Reputation: 1415

Why this happen is because the map is not in your app, it's beneath it. As you might already know; the cordova app runs in a web view inside a native app. The map you use in this plugin is not in the web view it's in the native app. And as I understand part of the web view is set to transparent to show the map beneath.

I guess that has been done for performance reasons; because the map would run in native app -using java for example- a lot faster than in the web view using JavaScript -or so do I believe. Personally I don't recommend using the JavaScript version and to just workaround this issue.

There is more than one way to overcome this. What I did was to have a more button in the header. When it's clicked it runs setClickable(false) if the user clicks on the backdrop or any button in the more list I execute the action then in the end setClickable(true).

Upvotes: 0

Iguatemi CG
Iguatemi CG

Reputation: 413

Actualy this is quite simple. All you have to do is put the html elements that you want to use inside the map container.

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

Source: https://github.com/mapsplugin/cordova-plugin-googlemaps/wiki/Map#how-does-the-plugin-work

Upvotes: 8

user3255670
user3255670

Reputation:

@Keerthivasan, you have two (2) options.

  1. Report what appears to be a bug to the author of the plugin.
  2. Not use the plugin. I have made google maps work without that plugin.

I just use the standard JS library that Google has, and load all the assets that I can directly from the phone. If you are interested in #2, then here are your links

Best of Luck

Upvotes: 1

Related Questions