GoogleMaps3 Trigger Hover Event On PanTo - google-maps-api-3

Question

I'm building a Google Map where I have 20-40 points plotted. Currently, when you hover over a point it triggers a qTip popup. I wrote a script to change the "panto" every 6 seconds and I'm trying to trigger the corresponding qTip when the point panned on.
<script type="text/javascript">
var map, marker, latLngToPixel;
var locations = [
["Reforestation Cumberland State Forest", 37.4963918, -78.2448664, "", "www.dof.virginia.gov"],
["Guaranta Settlement, Brazil ", -13.44234, -47.944336, "Brazil", "guaranta-settlement-brazil"],
["Trees For Cameroon", 7.369722, 12.354722, "Cameroon", "trees-for-cameroon"],
["Trees for Colombia", 6.3166667, -76.1333333, "Colombia", "urrao-colombia-trees-for-the-future"],
["Trees Water and People Trees for Food Project", 14.0200366, -89.6451688, "El Salvador", ""],
["Trees For Ethiopia", 8.4, 38.4, "Ethiopia", "trees-for-ethiopia"],
["Trees For Ghana", 7.946527, -1.023194, "Ghana", "trees-for-ghana"],
["Trees for Haiti", 18.7703377, -72.513088, "Haiti", "trees-for-haiti"],
["Trees For India", 11.1271225, 78.6568942, "India", "trees-for-india"],
["Madagascar Mangrove Rehabilitation", -23.6682, 46.13353, "Madagascar", "madagascar-mangrove-rehabilitation"],
["Trees For Mali", 12.39495, -7.937085, "Mali", "trees-for-mali"],
["Las Mercedes Reforestation", 13.4726005, -86.4592091, "Nicaragua", ""],
["Trees For Senegal", 14.10686, -15.55198, "Senegal", "trees-for-senegal"],
["Trees for Tanzania ", -8.588228, 35.29755, "Tanzania", "trees-for-tanzania-"],
["Trees for Uganda", 1.2124107, 33.7804036, "Uganda", "trees-for-uganda"],
["Reforest Kentucky", 38.2009055, -84.8732835, "United States", "reforest-kentucky"],
["Celebrate Arbor Day", 40.0583238, -74.4056612, "United States", ""],
["Longleaf Pine Reforestation Project", 32.1574351, -82.907123, "United States", "longleaf-pine-reforestation-on-georgia-state"],
["Trees for Tributaries", 43.0484029, -75.3785034, "United States", "trees-for-tributaries"],
["Wisconsin State Lands Tree Planting", 43.7844397, -88.7878678, "United States", "wisconsin-state-lands-tree-planting"],
["Flight 93 Memorial Reforestation Project", 40.0178571, -78.9072458, "United States", "Flight-93-Memorial-Reforestation"],
["Michigan State Forest Reforestation", 44.5105121, -85.5145764, "United States", "michigan-state-forest-reforestation"],
["Bladen Lakes State Forest", 35.80728455266026, -79.4805908203125, "United States", "bladen-lakes-state-forest"],
["Green Forests Work Maryland", 39.45316112807393, -77.97875979915261, "United States", "www.greenforestswork.org"],
["Green Forests Work Ohio", 39.010648, -83.469727, "United States", "www.greenforestswork.org"],
["Green Forests Work West Virginia", 39.01918382053526, -80.56054690852761, "United States", "www.greenforestswork.org"],
["Green Forests Work Alabama", 34.08906131584996, -86.83154303580523, "United States", "www.greenforestswork.org"],
["Green Forests Work Tennessee", 35.022799223730146, -86.50195319205523, "United States", "www.greenforestswork.org"],
];
function initialize() {
var styles = [ { featureType: "administrative.locality", stylers: [ { visibility: "simplified" } ] }, { featureType: "road.highway", stylers: [ { visibility: "off" } ] }, { featureType: "water", stylers: [ { visibility: "simplified" } ] }, { featureType: "administrative.locality", stylers: [ { visibility: "off" } ] }, { featureType: "water", stylers: [ { visibility: "on" }, { hue: "#85c6dc" } ] } ];
var CENTER_EARTH = new google.maps.LatLng(38, 0);
elem = document.getElementById('map_canvas');
var mapOptions = {
zoom: 2,
center: CENTER_EARTH
};
function LatLngToPixel(map) { this.setMap(map); }
LatLngToPixel.prototype = new google.maps.OverlayView();
LatLngToPixel.prototype.draw = function() {}
map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);
var build = new google.maps.StyledMapType(styles, mapOptions);
var infowindow = new google.maps.InfoWindow();
var marker, i;
var id = 1;
map.mapTypes.set('map', build);
map.setMapTypeId('map');
latLngToPixel = new LatLngToPixel(map);
/* Loop Through To Generate Points, Left 1 For Example... */
generateMarker(id, 37.4963918, -78.2448664, "Reforestation Cumberland ...", "Cumberland, Virginia ", "www.dof.virginia.gov", "61", "0", "61_4f0312528dbf4VA 4.jpg" );
id++;
}
function generateMarker(id, Lat, Lng, ProjectName, Location, PURL, idProject, TreesPlanted, Thumb) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(Lat, Lng),
icon: 'http://staging.&********.com/css/images/pin.png',
map: map,
});
var content = '<img style="float:left;margin-right:10px;" src="../common/perfectimg.php?w=61&h=62&u=/common/assets/'+Thumb+'&x=y.jpg" alt="tooltip1" width="61" height="62" /><div style="float:left;"><strong>' + ProjectName + '</strong><br />' + TreesPlanted + ' Trees Planted So Far... <br />' + Location + "</div>";
google.maps.event.addDomListener(marker, 'mouseover', function(event) {
var pixel = latLngToPixel.getProjection().fromLatLngToContainerPixel(event.latLng);
var pos = [ pixel.x, pixel.y ];
marker.tooltip = $('<div />').qtip({
content: content,
width: 600,
style: {
classes: 'ui-tooltip-blue',
tip: {
width: 12,
height: 12
}
},
position: {
my: 'bottom center',
at: 'left center',
adjust: {
x:-5, y:-32
},
target: pos,
container: $('#map_canvas'),
viewport: $('.map')
},
show: {
ready: true,
event: false,
solo: true
},
hide: {
event: 'mouseleave unfocus'
}
})
.qtip('api');
});
google.maps.event.addListener(marker, 'click', function(event) {
window.location = "?idProject="+idProject;
});
}
$(document).ready(function() {
initialize();
var x = 0;
setInterval(function(){
if(x > locations.length) x = 0;
map.setZoom(5);
map.panTo(new google.maps.LatLng(locations[x][1],locations[x][2]));
x++;
}, 6000);
});
</script>

Answer 1

I would say add your markers into an array as you add them. Then when you call your panTo, also trigger a click on that marker.
Create a global variable called arrMarkers. Then at the end of generateMarker function:
arrMarkers.push(marker);
Then in your setInterval function:
map.panTo(new google.maps.LatLng(locations[x][1],locations[x][2]));
google.maps.event.trigger(arrMarkers[x], 'click');
In fact, you may even be able to remove the panTo itself, as triggering the click will I think pan the map automatically anyway!
PS: The trailing comma at the end of the very last item in your array here will cause problems in IE (although this maybe isn't the actual data you're using):
["Green Forests Work Tennessee", 35.022799223730146, -86.50195319205523, "United States", "www.greenforestswork.org"],