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

Adding Map Markers

Page of 168

Instantiating Map Markers

Add markers to a map by instantiating the google.maps.Marker() class as illustrated below:


Ext.define('MyApp.view.MyMap', {
 extend: 'Ext.Map',
 config: {
  mapOptions: {
   center: new google.maps.LatLng (38.909027,-77.037165),
   mapTypeId: google.maps.MapTypeId.ROADMAP,
   zoom: 15
  }
 },
 initialize: function() {
   var gMap = this.getMap();
   
   // add traffic layer
   var trafficLayer = new google.maps.TrafficLayer();
   trafficLayer.setMap(gMap);
   
   // add panoramio layer
   var panoramioLayer = new google.maps.panoramio.PanoramioLayer();
   panoramioLayer.setMap(gMap);
   
   // drop map marker
   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'
   });
 }
});

The following configuration properties are typically used to change marker behavior:

Config PropertyDescription
position LatLng. Location of the marker (required)
map Map. The Map on which to place the marker.
animation Animation. The animation to play when the marker is added to the map. Valid options:
  • google.maps.Animation.BOUNCE
  • google.maps.Animation.DROP
draggable Boolean. If true, marker can be dragged.
icon string|icon|symbol. The image to display for the marker.
visible Boolean. Determines if the marker is displayed.

Removing Map Markers

Store references to all of your map markers in an array. Then you can simply loop through that array, invoking the marker.setMap(null) method in order to remove them from your map:

Ext.define('MyApp.view.MyMap', {
 extend: 'Ext.Map',
    
 mapMarkers : [], // store all markers
    
 config: {
  mapOptions: {
   center: new google.maps.LatLng (38.909027,-77.037165),
   mapTypeId: google.maps.MapTypeId.ROADMAP,
   zoom: 17
  }
 },
    
 // remove all markers
 clearMarkers: function() {
  for (var i=0; i<this.mapMarkers.length; i++) {
    this.mapMarkers[i].setMap(null);   
  }
  this.mapMarkers = new Array();
 },
    
 initialize: function() {
  var gMap = this.getMap();
  var trafficLayer = new google.maps.TrafficLayer();
  trafficLayer.setMap(gMap);
        
  var panoramioLayer = new google.maps.panoramio.PanoramioLayer();
  panoramioLayer.setMap(gMap);
        
  this.mapMarkers.push(
   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'
   })
  );
        
  // remove all markers after 5 seconds
  Ext.Function.defer(this.clearMarkers,5000,this);
 }
});
Page of 168
comments powered by Disqus