CODEWITHSUNDEEP
javascriptjquerygoogle-mapsgoogle-maps-api-3
iam47
iam47

Reputation: 5

How to trigger Button Click when everything is ready in google maps?

I have a google map set up with geojson layer loaded with it. The geojson includes many polygon features.

I wanted to trigger those features click from specific button in the page and i've sucessfully done that by refering to this thread: Google Maps - Trigger a click event on a data layer at a specific point (long/lat)

Now, what I want to do is whenever I open the page, the page will trigger specific button click. Or let say, whenever the document ready, trigger the button (that trigger feature click).

What things i did wrong so that i am unable to trigger the button click on ready function?

Here is what i've done:

$(document).ready(function(){
	$('#btnFirstLetter').click();
});

function initialize() {
  // Create a simple map.
  var map = new google.maps.Map(document.getElementById('map-canvas'), {
    zoom: 4,
    center: {lat: -28, lng: 137.883}
  });
map.data.loadGeoJson('https://storage.googleapis.com/maps-devrel/google.json');
  // Load a GeoJSON from the same server as our demo.
  
  google.maps.event.addListener(map.data,'addfeature',function(e){
      if(e.feature.getGeometry().getType()==='Polygon'){
          var bounds=new google.maps.LatLngBounds();
          
          e.feature.getGeometry().getArray().forEach(function(path){
          
             path.getArray().forEach(function(latLng){bounds.extend(latLng);})
          
          });
          e.feature.setProperty('bounds',bounds);
          
          new google.maps.Rectangle({map:map,bounds:bounds,clickable:false})
        
        }
  });
  
  $('#btnFirstLetter').click(function(){
  	var firstLetter = 'G';
    
    map.data.forEach(function(feature){
    	if (firstLetter == feature.getProperty('letter')){
      	google.maps.event.trigger(map.data, 'click', {'feature': feature});	
      }    	
    });
  });
  
  google.maps.event.addListener(map.data,'click',function(e){
   var bounds=e.feature.getProperty('bounds');
    if(bounds){
      map.fitBounds(bounds);
    }
  })
  
  
  
}

google.maps.event.addDomListener(window, 'load', initialize);
html, body, #map-canvas {
        height: 90%;
        margin: 0px;
        padding: 0px
      }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<div id="map-canvas"></div>
<button id="btnFirstLetter">
First Letter
</button>

Or this is my jsfiddle: https://jsfiddle.net/iam47/1Lxj2wf7/7/

Upvotes: 0

Views: 547

Answers (2)

lucas
lucas

Reputation: 1505

The danger of setting a timeout is that you create a race condition which can lead to undesired results, particularly if you are calling data from an external source (slow network and geoJSON data takes 501 ms to arrive? bad luck...)

While loadGeoJson does provide a callback option for once the data has arrived, what you really want is to fire the click once the data has been rendered...

google.maps.event.addListener(map.data,'addfeature',function(e){
  if(e.feature.getGeometry().getType()==='Polygon'){
      var bounds=new google.maps.LatLngBounds();
      e.feature.getGeometry().getArray().forEach(function(path){
         path.getArray().forEach(function(latLng){bounds.extend(latLng);})
      });
      e.feature.setProperty('bounds',bounds);
      new google.maps.Rectangle({map:map,bounds:bounds,clickable:false})
    }
    $('#btnFirstLetter').click();
});

Upvotes: 0

ScaisEdge
ScaisEdge

Reputation: 133400

do the different response to the by different browser to the DOMContentLoaded event or $(document).ready() function you could simply add a sligth timeout for wai the click invocation .. 

$(document).ready(function(){
   setTimeout(function(){
       $('#btnFirstLetter').click();
  }, 500);

});

try reduce the timeout to your acceptable value

Upvotes: 0

Related Questions