addListener

651 views
Skip to first unread message

Natalie O'Toole

unread,
Sep 7, 2011, 6:01:12 PM9/7/11
to google-map...@googlegroups.com
Hi,

Is there a way to do the following in Google Maps Javascript API v3:

GEvent.addListener(map, 'infowindowopen', function()
                { map.savePosition(); });

   GEvent.addListener(map, 'infowindowclose', function()
                { map.returnToSavedPosition(); }); 

The code above was created in v2. 
I'm trying to have the map revert back to its original position (centered) when the user closes the info window.

Help please.

Nat



Barry Hunter

unread,
Sep 7, 2011, 7:37:57 PM9/7/11
to google-map...@googlegroups.com
var savedLocation = null;

function savePosition() {
savedLocation = map.getCenter();
}
function returnToSavedPosition() {
if (savedLocation)
map.setCenter(savedLocation);
}

When you open an infowindow, call savePosition(), ie wherver you call
a infowindow.open

and attach a eventListener to the same infowindow

google.maps.event.addListener(infowindow, 'closeclick', function() {
returnToSavedPosition();
});

> --
> You received this message because you are subscribed to the Google Groups
> "Google Maps JavaScript API v3" group.
> To view this discussion on the web visit
> https://groups.google.com/d/msg/google-maps-js-api-v3/-/ndwsJgSvdb4J.
> To post to this group, send email to google-map...@googlegroups.com.
> To unsubscribe from this group, send email to
> google-maps-js-a...@googlegroups.com.
> For more options, visit this group at
> http://groups.google.com/group/google-maps-js-api-v3?hl=en.
>

Natalie O'Toole

unread,
Sep 9, 2011, 4:45:27 PM9/9/11
to google-map...@googlegroups.com
Hi Barry,

Here is my code: I have the map working, but the return to center on InfoWindow close does not work. What am I doing wrong, please?
Thanks,

Nat

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: KmlLayer KML</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">


function initialize() {
  var calgary = new google.maps.LatLng(51.012645,-114.132210);
  var myOptions = {
    zoom: 21,
    center: calgary,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }

  var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

var dtaLayer = new google.maps.KmlLayer('http://www.mtroyal.ca/MRUCampusMaps/libwithssd.kml');
  dtaLayer.setMap(map);


var etaLayer = new google.maps.KmlLayer('http://www.mtroyal.ca/MRUCampusMaps/withoutfinalfda.kml');
  etaLayer.setMap(map);


var ctaLayer = new google.maps.KmlLayer('http://www.mtroyal.ca/MRUCampusMaps/libvector6.kmz');
  ctaLayer.setMap(map);



}

var savedLocation = null;

function savePosition() {
    savedLocation = map.getCenter();
}
function returnToSavedPosition() {
    if (savedLocation)
        map.setCenter(savedLocation);
}

google.maps.event.addListener(infowindow, 'closeclick', function() {
  returnToSavedPosition();
});



</script>
</head>
<body onload="initialize()">
  <div id="map_canvas"></div>
</body>

</html>

Rossko

unread,
Sep 9, 2011, 9:49:02 PM9/9/11
to Google Maps JavaScript API v3
> What am I doing wrong, please?

What javascript errors do you get? Find out how to do basic debugging
in your browser.

Wrapping your functions inside another function is rarely a good idea,
they tend to cease existing when the parent function ends.

Natalie O'Toole

unread,
Sep 12, 2011, 11:24:13 AM9/12/11
to google-map...@googlegroups.com
Hi,

The error message is:

InfoWindow is not defined, referring to this line:

google.maps.event.addListener(infowindow, 'closeclick', function() {

Do I have to define infowindow as a variable?

Please let me know.

Thanks,

Nat

geoco...@gmail.com

unread,
Sep 12, 2011, 11:55:11 AM9/12/11
to Google Maps JavaScript API v3
On Sep 12, 8:24 am, Natalie O'Toole <noto...@mtroyal.ca> wrote:
> Hi,
>
> The error message is:
>
> InfoWindow is not defined, referring to this line:
>
> google.maps.event.addListener(infowindow, 'closeclick', function() {

Are you sure? javascript is case sensitive, InfoWindow and infowindow
are different things.

>
> Do I have to define infowindow as a variable?

Yes, it the context that click listener executed in.

-- Larry

Natalie O'Toole

unread,
Sep 12, 2011, 12:01:43 PM9/12/11
to google-map...@googlegroups.com
Hi,

I declared the infowindow variable. With this new code, I'm not getting any javascript errors or warnings, but the map still does not re-center when I click to close an infowindow. Here is my code. Help please!


<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: KmlLayer KML</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">

function detectBrowser() {
  var useragent = navigator.userAgent;
  var mapdiv = document.getElementById("map_canvas");
   
  if (useragent.indexOf('iPhone') != -1 || useragent.indexOf('Android') != -1 ) {
    mapdiv.style.width = '100%';
    mapdiv.style.height = '100%';
  } else {
    mapdiv.style.width = '600px';
    mapdiv.style.height = '800px';

  }
}


function initialize() {
  var calgary = new google.maps.LatLng(51.012645,-114.132210);
  var myOptions = {
  mapTypeControl:false,
  navigationControl:false,
  scaleControl:false,
  scaleControlOptions:false,
  streetViewControl:false,
  panControlOptions:false,

    zoom: 21,
    center: calgary,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }


  var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

var dtaLayer = new google.maps.KmlLayer('http://www.mtroyal.ca/MRUCampusMaps/libwithssd.kml');
  dtaLayer.setMap(map);


var etaLayer = new google.maps.KmlLayer('http://www.mtroyal.ca/MRUCampusMaps/withoutfinalfda.kml');
  etaLayer.setMap(map);


var ctaLayer = new google.maps.KmlLayer('http://www.mtroyal.ca/MRUCampusMaps/libvector6.kmz');
  ctaLayer.setMap(map);


}


var infowindow = new google.maps.InfoWindow;


var savedLocation = null;



function savePosition() {
    savedLocation = map.getCenter();
}
function returnToSavedPosition() {
    if (savedLocation)
        map.setCenter(savedLocation);
}


google.maps.event.addListener(infowindow, 'closeclick', function() {
  returnToSavedPosition();
});


</script>
</head>
<body onload="initialize()">



  <div id="map_canvas"></div>
</body>

</html>


Thanks,

Nat

xelawho

unread,
Sep 12, 2011, 1:52:36 PM9/12/11
to Google Maps JavaScript API v3
but...

(and it's not as if I know anything about kml) - can you access an
infowindow created by kml that way?
I thought it was trickier than that.

Natalie O'Toole

unread,
Sep 12, 2011, 1:57:57 PM9/12/11
to google-map...@googlegroups.com
Does anyone know how to re-center the map when an info window (generated from a kml layer) is closed?
Or a work around for this, please?

Thanks,

Nat


geoco...@gmail.com

unread,
Sep 12, 2011, 2:52:34 PM9/12/11
to Google Maps JavaScript API v3
On Sep 12, 10:57 am, Natalie O'Toole <noto...@mtroyal.ca> wrote:
> Does anyone know how to re-center the map when an info window (generated
> from a kml layer) is closed?

I don't believe that is possible.

> Or a work around for this, please?

use the "suppressInfowindows :true" (verify the spelling and
capitalization in the documentation) option when you create your
KmlLayer.

Use a listener on the KmlLayer to open your own infowindow (the
KmlLayer click event includes the infowindow html for the default
infowindow if you want the same content)

then your close listener might work.

-- Larry

>
> Thanks,
>
> Nat

Natalie O'Toole

unread,
Sep 12, 2011, 4:32:53 PM9/12/11
to google-map...@googlegroups.com
Hi,

The following code got the infowindow to be suppressed, bit no pop-ups appear. What am I doing wrong, please? I get no javascript errors. Here is my code:


function initialize() {
  var calgary = new google.maps.LatLng(51.012645,-114.132210);
  var myOptions = {
  mapTypeControl:false,
  navigationControl:false,
  scaleControl:false,
  scaleControlOptions:false,
  streetViewControl:false,
  panControlOptions:false,
    zoom: 21,
    center: calgary
    };



  var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);


 var nyLayer = new google.maps.KmlLayer(
      'http://www.mtroyal.ca/MRUCampusMaps/libwithssd.kml',
      {suppressInfoWindows: true});
nyLayer.setMap(map);
google.maps.event.addListener(nyLayer, 'click', function(kmlEvent) {
  var text = kmlEvent.featureData.description;
 
  });


 var ayLayer = new google.maps.KmlLayer(
      'http://www.mtroyal.ca/MRUCampusMaps/withoutfinalfda.kml',
      {suppressInfoWindows: true});
ayLayer.setMap(map);

  google.maps.event.addListener(ayLayer, 'click', function(kmlEvent) {
  
  var text = kmlEvent.featureData.description;
 
  });


var byLayer = new google.maps.KmlLayer(
      'http://www.mtroyal.ca/MRUCampusMaps/libvector6.kmz',
      {suppressInfoWindows: true});
byLayer.setMap(map);

  google.maps.event.addListener(byLayer, 'click', function(kmlEvent) {
   
  var text = kmlEvent.featureData.description;
 
  });

 


var infowindow = new google.maps.InfoWindow({
    maxWidth: 500
});



var savedLocation = null;


function savePosition() {
    savedLocation = map.getCenter();
}
function returnToSavedPosition() {
    if (savedLocation)
        map.setCenter(savedLocation);
}

google.maps.event.addListener(infowindow, 'closeclick', function() {
  returnToSavedPosition();
});

}
</script>
</head>
<body onload="initialize()">



  <div id="map_canvas"></div>
</body>

</html>

Help please,

Nat

Natalie O'Toole

unread,
Sep 12, 2011, 4:59:15 PM9/12/11
to google-map...@googlegroups.com
Hi,

Is this how I would do this?

var nyLayer = new google.maps.KmlLayer(
      'http://www.mtroyal.ca/MRUCampusMaps/libwithssd.kml',
      {suppressInfoWindows: true});
nyLayer.setMap(map);
google.maps.event.addListener(nyLayer, 'click', function(infoWindowHtml) {

  
  var text = kmlEvent.featureData.description;
  
  });

The info windows do not pop-up with this code. What am I doing wrong please?

Thanks,

Nat

Natalie O'Toole

unread,
Sep 12, 2011, 5:31:34 PM9/12/11
to google-map...@googlegroups.com
Hi,

How do I use a listener on the KmlLayer to open my own infowindow, please?

Thanks,

Nat
Message has been deleted
Message has been deleted

xelawho

unread,
Sep 12, 2011, 6:34:59 PM9/12/11
to Google Maps JavaScript API v3
again, I don't know much about kml, but browsing the documentation
(and from the way the rest of the API works), it seem to me that your
listeners should look something like this:

google.maps.event.addListener(byLayer, 'click',
function(KmlMouseEvent) {
openWindow(KmlMouseEvent);
});

which call a function that looks like this:

function openWindow(KmlMouseEvent) {
savedLocation = map.getCenter();
infowindow.setPosition(KmlMouseEvent.latLng);
infowindow.setContent(KmlMouseEvent.featureData.infoWindowHtml);
infowindow.open(map);
}

but I could be way off, and am wide open to correction.

geoco...@gmail.com

unread,
Sep 12, 2011, 10:02:34 PM9/12/11
to Google Maps JavaScript API v3
On Sep 12, 5:31 pm, Natalie O'Toole <noto...@mtroyal.ca> wrote:
> Hi,
>
> How do I use a listener on the KmlLayer to open my own infowindow, please?

Here is an example:
http://www.geocodezip.com/www_satpacktravel_com_api_v5b.html
(it creates a single infowindow for two layers, but it should help)

-- Larry


>
> Thanks,
>
> Nat
Reply all
Reply to author
Forward
0 new messages