Maddening problem updating div on "moveend"
746 views
Skip to first unread message
Robin
Sep 2, 2009, 1:47:29 PM9/2/09
to Google Maps JavaScript API v3
I am working on a simple webapp using the V3 api. I am just starting
simple and trying to get "moveend" to trigger a div changing text, but
it just isn't working. Can anyone help me figure this out? I am a
amateur programmer so I have been hitting my head on this for hours. I
have some simple ASP above this code that gets the lat and long, but
other than that, this is all the code. Nothing put in
google.maps.Event.addListener seems to work when I pan around the
map.
here is a link to see the text on top not update.
http://iphone.placesnap.com/editlocation_03.asp?Photo=3624535389547715
Thanks everyone! I could really use the help.
<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: Map Simple</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/
js?sensor=false"> </script>
<script type="text/javascript">
function initialize() {
var myLatlng = new google.maps.LatLng(<%=xLatitude%>,<%=xLongitude
%>);
var myOptions = {
zoom: 14,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById
("map_canvas"), myOptions);
}
function changetext(){
document.getElementById("message").innerHTML = "working"
}
google.maps.event.addListener(map, "moveend", function() {
changetext()
});
</script>
</head>
<body style="margin:0px; padding:0px;" onload="initialize();">
<div id="message">sdfg</div>
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
bratliff
Sep 2, 2009, 2:44:19 PM9/2/09
to Google Maps JavaScript API v3
On Sep 2, 5:47 pm, Robin <rob...@gmail.com> wrote:
> I am working on a simple webapp using the V3 api. I am just starting
> simple and trying to get "moveend" to trigger a div changing text, but
> it just isn't working. Can anyone help me figure this out? I am a
> amateur programmer so I have been hitting my head on this for hours. I
> have some simple ASP above this code that gets the lat and long, but
> other than that, this is all the code. Nothing put in
> google.maps.Event.addListener seems to work when I pan around the
> map.
V3 is missing some important V2 events on the whole map:
> I am working on a simple webapp using the V3 api. I am just starting
> simple and trying to get "moveend" to trigger a div changing text, but
> it just isn't working. Can anyone help me figure this out? I am a
> amateur programmer so I have been hitting my head on this for hours. I
> have some simple ASP above this code that gets the lat and long, but
> other than that, this is all the code. Nothing put in
> google.maps.Event.addListener seems to work when I pan around the
> map.
mousemove
mouseover
mouseout
movebegin
moveend
See:
http://code.google.com/apis/maps/documentation/v3/reference.html
Issue 1651 addresses the first three:
http://code.google.com/p/gmaps-api-issues/issues/detail?id=1651
You could add your list to the same issue or start another issue.
Robin
Sep 2, 2009, 3:10:33 PM9/2/09
to Google Maps JavaScript API v3
What would you recommend I use instead of moveend? I want to update
the div every time the user pans or zooms.
the div every time the user pans or zooms.
Robin
Sep 2, 2009, 3:17:10 PM9/2/09
to Google Maps JavaScript API v3
Ok it looks like bounds_changed is what I want. I will give that a
shot next.
shot next.
Esa
Sep 2, 2009, 3:32:45 PM9/2/09
to Google Maps JavaScript API v3
You can construct the missing 'moveend' event:
google.maps.event.addListener(map, 'center_changed', function(){
function finished(){
google.maps.event.trigger(map, 'moveend');
}
clearTimeout(this.timeout);
this.timeout = setTimeout(finished, 200);
});
A continuous series of 'center_changed' events does not trigger it
but it is triggered 200 ms after last 'center_changed' event.
google.maps.event.addListener(map, 'center_changed', function(){
function finished(){
google.maps.event.trigger(map, 'moveend');
}
clearTimeout(this.timeout);
this.timeout = setTimeout(finished, 200);
});
A continuous series of 'center_changed' events does not trigger it
but it is triggered 200 ms after last 'center_changed' event.
bratliff
Sep 2, 2009, 3:40:20 PM9/2/09
to Google Maps JavaScript API v3
On Sep 2, 7:17 pm, Robin <rob...@gmail.com> wrote:
> Ok it looks like bounds_changed is what I want. I will give that a
> shot next.
"bounds_changed" is the best choice of the choices available.
> Ok it looks like bounds_changed is what I want. I will give that a
> shot next.
"center_changed" could be used but it will not fire for a simple zoom
without panning. The V3 "bounds_changed" event is analogous to the V2
"move" event. It signals movement in progress but not completion.
You could cobble something together with a timer but you should not
have to do it.
Please star 1651. It helps to set Google's priorities.
bratliff
Sep 2, 2009, 3:50:09 PM9/2/09
to Google Maps JavaScript API v3
If it seems I am contradicting Esa, sorry. It was not my intent. Our
replies were eight minutes apart. If I had seen his response I would
not have sent mine.
replies were eight minutes apart. If I had seen his response I would
not have sent mine.
Esa
Sep 2, 2009, 5:50:19 PM9/2/09
to Google Maps JavaScript API v3
On Sep 2, 10:50 pm, bratliff wrote:
> If it seems I am contradicting Esa, sorry.
I just experimented with 'bounds_changed' and I agree it is the best
choice of the documented events. It is not triggered continuously
during a fast drag. There is some delay. 'center_changed' and 'drag'
are triggered continuously. But the delay is so short that panning by
keyboard or navigating button triggers a series of 'bounds_changed'
events.
It's true that "center_changed" is not fired after a zoom. I did not
notice that. So I rewrite my 'moveend' event to be constructed from
'bounds_changed'.
google.maps.event.addListener(map, 'bounds_changed', function(){
function finished(){
google.maps.event.trigger(map, 'moveend');
}
clearTimeout(this.timeout);
this.timeout = setTimeout(finished, 200);
});
If you reduce the delay to 50 ms, the event is triggered more than
google.maps.event.trigger(map, 'moveend');
}
clearTimeout(this.timeout);
this.timeout = setTimeout(finished, 200);
});
once by nav button pan with FF3.5. So 200 ms might be a safe value.
Robin
Sep 2, 2009, 6:07:18 PM9/2/09
to Google Maps JavaScript API v3
Hmm I am still not getting anything to trigger. Here is my current
code, am I doing something wrong? I put the Changetext() in the
finished function
http://iphone.placesnap.com/editlocation_03.asp?Photo=3624535389547715
<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: Map Simple</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/
js?sensor=false"> </script>
<script type="text/javascript">
function initialize() {
var myLatlng = new google.maps.LatLng(<%=xLatitude%>,<%=xLongitude
%>);
var myOptions = {
zoom: 14,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById
("map_canvas"), myOptions);
}
function changetext(){
document.getElementById('message').innerHTML="Good Afternoon";
code, am I doing something wrong? I put the Changetext() in the
finished function
http://iphone.placesnap.com/editlocation_03.asp?Photo=3624535389547715
<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: Map Simple</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/
js?sensor=false"> </script>
<script type="text/javascript">
function initialize() {
var myLatlng = new google.maps.LatLng(<%=xLatitude%>,<%=xLongitude
%>);
var myOptions = {
zoom: 14,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById
("map_canvas"), myOptions);
}
function changetext(){
}
google.maps.event.addListener(map, 'bounds_changed', function(){
function finished(){
google.maps.event.trigger(map, 'moveend');
changetext();
google.maps.event.addListener(map, 'bounds_changed', function(){
function finished(){
google.maps.event.trigger(map, 'moveend');
}
clearTimeout(this.timeout);
this.timeout = setTimeout(finished, 200);
});
clearTimeout(this.timeout);
this.timeout = setTimeout(finished, 200);
});
</script>
</head>
<body style="margin:0px; padding:0px;" onload="initialize();">
<div id="message">sdfg</div>
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
</head>
<body style="margin:0px; padding:0px;" onload="initialize();">
<div id="message">sdfg</div>
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
Esa
Sep 2, 2009, 6:43:49 PM9/2/09
to Google Maps JavaScript API v3
Part of your code is outside the initialize() function. That part (the
event listener) is run before map is defined by initialize().
The easiest modification is to move the closing curly bracket of
initialize() to the end of the code. Just before closing </script>
event listener) is run before map is defined by initialize().
The easiest modification is to move the closing curly bracket of
initialize() to the end of the code. Just before closing </script>
Robin
Sep 2, 2009, 9:04:54 PM9/2/09
to Google Maps JavaScript API v3
That makes sense! Thank you. Now everything works! I am using this
code and it updates the div continuously with the center location, it
is exactly what I wanted.
google.maps.event.addListener(map, 'bounds_changed', function(){
var newlocation = map.get("center")
newgeo=newlocation
newgeo=newgeo.toString();
document.getElementById("message").innerHTML = newgeo
});
Thanks everyone!
code and it updates the div continuously with the center location, it
is exactly what I wanted.
google.maps.event.addListener(map, 'bounds_changed', function(){
var newlocation = map.get("center")
newgeo=newlocation
newgeo=newgeo.toString();
document.getElementById("message").innerHTML = newgeo
});
Thanks everyone!
Reply all
Reply to author
Forward
0 new messages