Click to search on your search term.
Subscribe to Fig Leaf Tutorials


Need help with a project? Contact us at sales@figleaf.com.
From code reviews to project "jumpstarts" and full life-cycle development, we've got you covered!
Check out our case studies!
Follow us on Twitter!
Click here to join our Facebook group!

Ready to upgrade your skills? Try these instructor-led classes in Washington, DC:
Ext JS 6 Bootcamp
12/04/2017

Making Map Markers Tappable

Page of 168

Use the google.maps.event.addListener() method to bind a 'click' event to your map markers in order to make them 'tappable' in Sencha Touch.

Note the following:

  • As illustrated on line 35, the google.maps.event.addListener() method returns the lat/lon of the position of the marker, but not the marker instance itself.
  • In order to run the handler function in the scope of the view class you will need to invoke JavaScript's function.call() method and pass along the scope as its first argument as illustrated on line 36.


Ext.define('MyApp.view.MyMap', {
 extend: 'MyApp.view.MyMap',
 alias: 'widget.mymap',
 
 mapMarkers : [],
 
 config: {
  mapOptions: {
   center: new google.maps.LatLng (38.909027,-77.037165),
   mapTypeId: google.maps.MapTypeId.SATELLITE,
   zoom: 17
  }
 },
 
 clearMarkers: function() {
  for (var i=0; i<this.mapMarkers.length; i++) {
   this.mapMarkers[i].setMap(null);   
  }
 },
 
 initialize: function() {
        
  var me = this;
        
  var gMap = this.getMap();
         
  var marker = new google.maps.Marker({
   map: gMap,
   animation: google.maps.Animation.DROP,
   position: new google.maps.LatLng (38.909027,-77.037165),
   icon: 'resources/images/jogging.png',
   markerId: 1
  });
        
  google.maps.event.addListener(marker,'click',function(pos) {
   me.toggleBounce.call(me,marker,pos);
  });
        
  this.mapMarkers.push(marker);
        
 }, 
    
 toggleBounce: function(marker, pos) {
      
  var lat = pos.latLng.lat(); // lat of click
  var lng = pos.latLng.lng(); // lng of click
        
  console.log(this); // scoped to the "MyMap" class
        
  if (marker.getAnimation() != null) {
   marker.setAnimation(null);
  } else {
   marker.setAnimation(google.maps.Animation.BOUNCE);
  } 
 }
});
Page of 168
comments powered by Disqus