CODEWITHSUNDEEP
google-mapsgoogle-maps-api-3
HQL
HQL

Reputation: 13

Panning the map after trigering click on a marker to open infowindow

I have a simple google map v3 with one marker and infowindow attached to it.

if I click the marker, the infowindow shows and map pans automatically to fit the infowindow in the view, however if I try to trigger a click to open the infowindow when the page loads, the infowindow opens but panning does not occur.

Triggering is done like so:

google.maps.event.trigger(marker, 'click');

If I move above code into a function and call it with setTimeout 500, then the panning happens as well.

I dug around in API, but could not find a function to cause auto panning on demand. is there a way without using a timeout? Why does the timeout help?

Thanks

Here's the example that Does not pan:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map-canvas { width: 400px; height: 320px }
    </style>
    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?sensor=false">
    </script>
    <script type="text/javascript">
      function initialize() {
        var myLatlng = new google.maps.LatLng(42.6620233,-78.4250679);
        var mapOptions = {
          center: myLatlng,
          zoom: 7,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map-canvas"),
            mapOptions);

        var contentString = '<div style="width: 200px; height: 100px;">Testing</div>';

        var infowindow = new google.maps.InfoWindow({
            content: contentString
        });

        var marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            title:"Hello World!"
        });

        google.maps.event.addListener(marker, 'click', function() {
          infowindow.open(map,marker);
        });

        google.maps.event.trigger(marker, 'click'); 

      }
      google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>
  <body>
    <div id="map-canvas"/>
  </body>
</html>

Here's the one that does pan but only with a timeout:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map-canvas { width: 400px; height: 320px }
    </style>
    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?sensor=false">
    </script>
    <script type="text/javascript">
      var map;
      var marker;

      function initialize() {
        var myLatlng = new google.maps.LatLng(42.6620233,-72.4250679);
        var mapOptions = {
          center: myLatlng,
          zoom: 7,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("map-canvas"),
            mapOptions);

        var contentString = '<div style="width: 200px; height: 100px;">Testing</div>';

        var infowindow = new google.maps.InfoWindow({
            content: contentString
        });

        marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            title:"Hello World!"
        });

        google.maps.event.addListener(marker, 'click', function() {
          infowindow.open(map,marker);
        });

        setTimeout('pop()', 500);
        //google.maps.event.trigger(marker, 'click');
        //infowindow.open(map,marker);
        //map.pan();

      }

      google.maps.event.addDomListener(window, 'load', initialize);

      function pop() {
        google.maps.event.trigger(marker, 'click');
      }

      //setTimeout('pop()', 500);

    </script>
  </head>
  <body>
    <div id="map-canvas"/>
  </body>
</html>

Upvotes: 0

Views: 746

Answers (1)

Dr.Molle
Dr.Molle

Reputation: 117334

The initializing of the map is not a synchronous process, when you've created the Map-instance it takes some time until all properties of the map are set(so maybe some properties that are needed to determine the position where to pan the map)

When you use a timeout and it works the needed properties are set at this time.

Instead a timeout I would suggest to call the function when the tiles have been loaded, you can be sure that the initializing of the map has been finished at this time:

google.maps.event.addListenerOnce(map, 'tilesloaded', pop);

Upvotes: 1

Related Questions