I have a map that will contain 50 or so markers and as the markers are
created, I was wondering if it was possible to drop them vertically
from the top of the map down to their correct longitude... making the
map somewhat animated. Has anyone done this before?
On Nov 6, 6:21 pm, JWoodall <woodal...@gmail.com> wrote:
> I have a map that will contain 50 or so markers and as the markers are
> created, I was wondering if it was possible to drop them vertically
> from the top of the map down to their correct longitude... making the
> map somewhat animated.
Easy!
- Create the marker at the longitude the user defined and the latitude
of the top of the map.
map.getBounds().getNorthEast().lat()
- Then animate it with afunction like
// Pseudo-code
function moveMarker() {
var p1 = map.fromLatLngToDivPixel(marker.getLatLng());
var p2 = map.fromLatLngToDivPixel(userSelectedLatLng);
var deltaPixels = Math.abs(p2.y - p1.y);
var step = Math.floor(deltaPixels/ 10);
var newLatLng = map.fromDivPixelToLatLng(new GPoint(p1.x,p1.y
+step));
marker.setLatLng(newLatLng)
On Nov 6, 7:44 pm, Marcelo <marcelo...@hotmail.com> wrote:
> On Nov 6, 6:21 pm, JWoodall <woodal...@gmail.com> wrote:
> > I have a map that will contain 50 or so markers and as the markers are
> > created, I was wondering if it was possible to drop them vertically
> > from the top of the map down to their correct longitude... making the
> > map somewhat animated.
Sorry. Previous post went off too early. (I thought I was using my
editor and pushed the wrong keys) :-)
// Pseudo-code - Untested
function moveMarker() {
var p1 = map.fromLatLngToDivPixel(marker.getLatLng());
var p2 = map.fromLatLngToDivPixel(userSelectedLatLng);
var deltaPixels = Math.abs(p2.y - p1.y);
var step = Math.floor(deltaPixels/ 10);
var newLatLng = map.fromDivPixelToLatLng(new GPoint(p1.x,p1.y
+step));
marker.setLatLng(newLatLng)
if (deltaPixels - step > step) {
window.setTimeout("moveMarker()",200);
}
Thanks for the quick response. Where/when would I call the
function...? my markers are generated from an xml file that has there
Lat/Long and some info for the infoWindow.
function createMarker(point, iconname, info) {
var icon = new GIcon(baseIcon);
icon.image = iconname.getAttribute("image");
var marker = new GMarker(point, icon);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml("stuff from xml");
});
moveMarker(marker);
return marker;
}
function moveMarker(marker) {
var p1 = map.fromLatLngToDivPixel(marker.getLatLng());
var p2 = map.fromLatLngToDivPixel(userSelectedLatLng);
var deltaPixels = Math.abs(p2.y - p1.y);
var step = Math.floor(deltaPixels/ 10);
var newLatLng = map.fromDivPixelToLatLng(new GPoint(p1.x,p1.y
+step));
marker.setLatLng(newLatLng)
if (deltaPixels - step > step) {
window.setTimeout("moveMarker()",200);
}
}
On Nov 6, 1:48 pm, Marcelo <marcelo...@hotmail.com> wrote:
> On Nov 6, 7:44 pm, Marcelo <marcelo...@hotmail.com> wrote:
> > On Nov 6, 6:21 pm, JWoodall <woodal...@gmail.com> wrote:
> > > I have a map that will contain 50 or so markers and as the markers are
> > > created, I was wondering if it was possible to drop them vertically
> > > from the top of the map down to their correct longitude... making the
> > > map somewhat animated.
> Sorry. Previous post went off too early. (I thought I was using my
> editor and pushed the wrong keys) :-)
> // Pseudo-code - Untested
> function moveMarker() {
> var p1 = map.fromLatLngToDivPixel(marker.getLatLng());
> var p2 = map.fromLatLngToDivPixel(userSelectedLatLng);
> var deltaPixels = Math.abs(p2.y - p1.y);
> var step = Math.floor(deltaPixels/ 10);
> var newLatLng = map.fromDivPixelToLatLng(new GPoint(p1.x,p1.y
> +step));
> marker.setLatLng(newLatLng)
Thanks for the quick response. Where/when would I call the
function...? my markers are generated from an xml file that has there
Lat/Long and some info for the infoWindow.
function createMarker(point, iconname, info) {
var icon = new GIcon(baseIcon);
icon.image = iconname.getAttribute("image");
var marker = new GMarker(point, icon);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml("stuff from xml");
});
moveMarker(marker);
return marker;
}
function moveMarker(marker) {
var p1 = map.fromLatLngToDivPixel(marker.getLatLng());
var p2 = map.fromLatLngToDivPixel(userSelectedLatLng);
var deltaPixels = Math.abs(p2.y - p1.y);
var step = Math.floor(deltaPixels/ 10);
var newLatLng = map.fromDivPixelToLatLng(new GPoint(p1.x,p1.y
+step));
marker.setLatLng(newLatLng)
if (deltaPixels - step > step) {
window.setTimeout("moveMarker()",200);
}
}
On Nov 6, 1:48 pm, Marcelo <marcelo...@hotmail.com> wrote:
> On Nov 6, 7:44 pm, Marcelo <marcelo...@hotmail.com> wrote:
> > On Nov 6, 6:21 pm, JWoodall <woodal...@gmail.com> wrote:
> > > I have a map that will contain 50 or so markers and as the markers are
> > > created, I was wondering if it was possible to drop them vertically
> > > from the top of the map down to their correct longitude... making the
> > > map somewhat animated.
> Sorry. Previous post went off too early. (I thought I was using my
> editor and pushed the wrong keys) :-)
> // Pseudo-code - Untested
> function moveMarker() {
> var p1 = map.fromLatLngToDivPixel(marker.getLatLng());
> var p2 = map.fromLatLngToDivPixel(userSelectedLatLng);
> var deltaPixels = Math.abs(p2.y - p1.y);
> var step = Math.floor(deltaPixels/ 10);
> var newLatLng = map.fromDivPixelToLatLng(new GPoint(p1.x,p1.y
> +step));
> marker.setLatLng(newLatLng)
> my markers are generated from an xml file that has there
> Lat/Long and some info for the infoWindow.
> function createMarker(point, iconname, info) {
> var icon = new GIcon(baseIcon);
> icon.image = iconname.getAttribute("image");
> var marker = new GMarker(point, icon);
> On Nov 6, 1:48 pm, Marcelo <marcelo...@hotmail.com> wrote:
> > On Nov 6, 7:44 pm, Marcelo <marcelo...@hotmail.com> wrote:
> > > On Nov 6, 6:21 pm, JWoodall <woodal...@gmail.com> wrote:
> > > > I have a map that will contain 50 or so markers and as the markers are
> > > > created, I was wondering if it was possible to drop them vertically
> > > > from the top of the map down to their correct longitude... making the
> > > > map somewhat animated.
> > Sorry. Previous post went off too early. (I thought I was using my
> > editor and pushed the wrong keys) :-)
> > // Pseudo-code - Untested
> > function moveMarker() {
> > var p1 = map.fromLatLngToDivPixel(marker.getLatLng());
> > var p2 = map.fromLatLngToDivPixel(userSelectedLatLng);
> > var deltaPixels = Math.abs(p2.y - p1.y);
> > var step = Math.floor(deltaPixels/ 10);
> > var newLatLng = map.fromDivPixelToLatLng(new GPoint(p1.x,p1.y
> > +step));
> > marker.setLatLng(newLatLng)
Thanks for the quick response. Where/when would I call the
function...? my markers are generated from an xml file that has there
Lat/Long and some info for the infoWindow.
function createMarker(point, iconname, info) {
var icon = new GIcon(baseIcon);
icon.image = iconname.getAttribute("image");
var marker = new GMarker(point, icon);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml("stuff from xml");
});
moveMarker(marker);
return marker;
}
function moveMarker(marker) {
var p1 = map.fromLatLngToDivPixel(marker.getLatLng());
var p2 = map.fromLatLngToDivPixel(userSelectedLatLng);
var deltaPixels = Math.abs(p2.y - p1.y);
var step = Math.floor(deltaPixels/ 10);
var newLatLng = map.fromDivPixelToLatLng(new GPoint(p1.x,p1.y
+step));
marker.setLatLng(newLatLng)
if (deltaPixels - step > step) {
window.setTimeout("moveMarker()",200);
}
}
On Nov 6, 1:48 pm, Marcelo <marcelo...@hotmail.com> wrote:
> On Nov 6, 7:44 pm, Marcelo <marcelo...@hotmail.com> wrote:
> > On Nov 6, 6:21 pm, JWoodall <woodal...@gmail.com> wrote:
> > > I have a map that will contain 50 or so markers and as the markers are
> > > created, I was wondering if it was possible to drop them vertically
> > > from the top of the map down to their correct longitude... making the
> > > map somewhat animated.
> Sorry. Previous post went off too early. (I thought I was using my
> editor and pushed the wrong keys) :-)
> // Pseudo-code - Untested
> function moveMarker() {
> var p1 = map.fromLatLngToDivPixel(marker.getLatLng());
> var p2 = map.fromLatLngToDivPixel(userSelectedLatLng);
> var deltaPixels = Math.abs(p2.y - p1.y);
> var step = Math.floor(deltaPixels/ 10);
> var newLatLng = map.fromDivPixelToLatLng(new GPoint(p1.x,p1.y
> +step));
> marker.setLatLng(newLatLng)
Yeah, and it's inside a firewall or I would link to it. Here's the
entire script.
<script src="http://maps.google.com/maps? file=api&v=1&key=ABQIAAAAwJZL6qmHRMoJ3eEFmNHeURQc7yXP-42arpddqVt4pIZac6lvOB S1WuGKvGY468_Hu2ulMqwfVN2WIQ"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load(){
var map = new GMap(document.getElementById("map"));
var point = new GPoint(-96.926791,32.863917);
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(point, 5);
//map.setBounds(map.GBounds(-67.30, 18.611, -66.13, 17.786));
var baseIcon = new GIcon();
baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
baseIcon.iconSize = new GSize(18, 50);
baseIcon.shadowSize = new GSize(37, 34);
baseIcon.iconAnchor = new GPoint(9, 34);
baseIcon.infoWindowAnchor = new GPoint(9, 2);
baseIcon.infoShadowAnchor = new GPoint(15, 15);
var request = GXmlHttp.create();
request.open("GET", "zips.xml", true);
request.onreadystatechange = function() {
if (request.readyState == 4) {
var xmlDoc = request.responseXML;
var zips = xmlDoc.documentElement.getElementsByTagName("point");
var icons = xmlDoc.documentElement.getElementsByTagName("icon");
var info = xmlDoc.documentElement.getElementsByTagName("info");
for (var i = 0; i < zips.length; i++) {
var point = new GPoint(parseFloat(zips[i].getAttribute("lng")),
parseFloat(zips[i].getAttribute("lat")));
var marker = createMarker(point, icons[i], info[i]);
map.addOverlay(marker);
}
}
}
function createMarker(point, iconname, info) {
var icon = new GIcon(baseIcon);
icon.image = iconname.getAttribute("image");
var marker = new GMarker(point, icon);
> > On Nov 6, 1:48 pm, Marcelo <marcelo...@hotmail.com> wrote:
> > > On Nov 6, 7:44 pm, Marcelo <marcelo...@hotmail.com> wrote:
> > > > On Nov 6, 6:21 pm, JWoodall <woodal...@gmail.com> wrote:
> > > > > I have a map that will contain 50 or so markers and as the markers are
> > > > > created, I was wondering if it was possible to drop them vertically
> > > > > from the top of the map down to their correct longitude... making the
> > > > > map somewhat animated.
> > > Sorry. Previous post went off too early. (I thought I was using my
> > > editor and pushed the wrong keys) :-)
> > > // Pseudo-code - Untested
> > > function moveMarker() {
> > > var p1 = map.fromLatLngToDivPixel(marker.getLatLng());
> > > var p2 = map.fromLatLngToDivPixel(userSelectedLatLng);
> > > var deltaPixels = Math.abs(p2.y - p1.y);
> > > var step = Math.floor(deltaPixels/ 10);
> > > var newLatLng = map.fromDivPixelToLatLng(new GPoint(p1.x,p1.y
> > > +step));
> > > marker.setLatLng(newLatLng)
Yeah, and it's inside a firewall or I would link to it. Here's the
entire script.
<script src="http://maps.google.com/maps? file=api&v=1&key=ABQIAAAAwJZL6qmHRMoJ3eEFmNHeURQc7yXP-42arpddqVt4pIZac6lvOB S1WuGKvGY468_Hu2ulMqwfVN2WIQ"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load(){
var map = new GMap(document.getElementById("map"));
var point = new GPoint(-96.926791,32.863917);
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(point, 5);
//map.setBounds(map.GBounds(-67.30, 18.611, -66.13, 17.786));
var baseIcon = new GIcon();
baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
baseIcon.iconSize = new GSize(18, 50);
baseIcon.shadowSize = new GSize(37, 34);
baseIcon.iconAnchor = new GPoint(9, 34);
baseIcon.infoWindowAnchor = new GPoint(9, 2);
baseIcon.infoShadowAnchor = new GPoint(15, 15);
var request = GXmlHttp.create();
request.open("GET", "zips.xml", true);
request.onreadystatechange = function() {
if (request.readyState == 4) {
var xmlDoc = request.responseXML;
var zips = xmlDoc.documentElement.getElementsByTagName("point");
var icons = xmlDoc.documentElement.getElementsByTagName("icon");
var info = xmlDoc.documentElement.getElementsByTagName("info");
for (var i = 0; i < zips.length; i++) {
var point = new GPoint(parseFloat(zips[i].getAttribute("lng")),
parseFloat(zips[i].getAttribute("lat")));
var marker = createMarker(point, icons[i], info[i]);
map.addOverlay(marker);
}
}
}
function createMarker(point, iconname, info) {
var icon = new GIcon(baseIcon);
icon.image = iconname.getAttribute("image");
var marker = new GMarker(point, icon);
> > On Nov 6, 1:48 pm, Marcelo <marcelo...@hotmail.com> wrote:
> > > On Nov 6, 7:44 pm, Marcelo <marcelo...@hotmail.com> wrote:
> > > > On Nov 6, 6:21 pm, JWoodall <woodal...@gmail.com> wrote:
> > > > > I have a map that will contain 50 or so markers and as the markers are
> > > > > created, I was wondering if it was possible to drop them vertically
> > > > > from the top of the map down to their correct longitude... making the
> > > > > map somewhat animated.
> > > Sorry. Previous post went off too early. (I thought I was using my
> > > editor and pushed the wrong keys) :-)
> > > // Pseudo-code - Untested
> > > function moveMarker() {
> > > var p1 = map.fromLatLngToDivPixel(marker.getLatLng());
> > > var p2 = map.fromLatLngToDivPixel(userSelectedLatLng);
> > > var deltaPixels = Math.abs(p2.y - p1.y);
> > > var step = Math.floor(deltaPixels/ 10);
> > > var newLatLng = map.fromDivPixelToLatLng(new GPoint(p1.x,p1.y
> > > +step));
> > > marker.setLatLng(newLatLng)
> var map = new GMap(document.getElementById("map"));
> var point = new GPoint(-96.926791,32.863917);
> map.addControl(new GLargeMapControl());
> map.addControl(new GMapTypeControl());
> map.centerAndZoom(point, 5);
> //map.setBounds(map.GBounds(-67.30, 18.611, -66.13, 17.786));
> var baseIcon = new GIcon();
> baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
> baseIcon.iconSize = new GSize(18, 50);
> baseIcon.shadowSize = new GSize(37, 34);
> baseIcon.iconAnchor = new GPoint(9, 34);
> baseIcon.infoWindowAnchor = new GPoint(9, 2);
> baseIcon.infoShadowAnchor = new GPoint(15, 15);
> var request = GXmlHttp.create();
> request.open("GET", "zips.xml", true);
> request.onreadystatechange = function() {
> if (request.readyState == 4) {
> var xmlDoc = request.responseXML;
> var zips = xmlDoc.documentElement.getElementsByTagName("point");
> var icons = xmlDoc.documentElement.getElementsByTagName("icon");
> var info = xmlDoc.documentElement.getElementsByTagName("info");
> for (var i = 0; i < zips.length; i++) {
> var point = new GPoint(parseFloat(zips[i].getAttribute("lng")),
> parseFloat(zips[i].getAttribute("lat")));
> function createMarker(point, iconname, info) {
> var icon = new GIcon(baseIcon);
> icon.image = iconname.getAttribute("image");
> var marker = new GMarker(point, icon);
> > > On Nov 6, 1:48 pm, Marcelo <marcelo...@hotmail.com> wrote:
> > > > On Nov 6, 7:44 pm, Marcelo <marcelo...@hotmail.com> wrote:
> > > > > On Nov 6, 6:21 pm, JWoodall <woodal...@gmail.com> wrote:
> > > > > > I have a map that will contain 50 or so markers and as the markers are
> > > > > > created, I was wondering if it was possible to drop them vertically
> > > > > > from the top of the map down to their correct longitude... making the
> > > > > > map somewhat animated.
> > > > Sorry. Previous post went off too early. (I thought I was using my
> > > > editor and pushed the wrong keys) :-)