I am trying to show the location in google map when I mouse over to the tweet Result provided an image of the webpage
I using java script to enable the mouse over function
var defaultLocation = new google.maps.LatLng(5.419297, 100.3230233);
var selectedLocation = "";
var query;
var value;
var marker;
$(document).ready(function(){
var mapCanvas;
var map;
var LatLng;
var mapOptions;
refresh();
setInterval(function(){ refresh() }, 60000);
function init(){
LatLng = defaultLocation;
mapOptions = {
center: LatLng,
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: true
};
mapCanvas = document.getElementById("mapCanvas");
map = new google.maps.Map(mapCanvas, mapOptions);
//To add marker
var icon = {
url: "element3_4/tweetSearch/pointer.png", // url
scaledSize: new google.maps.Size(50, 50), // scaled size
origin: new google.maps.Point(0,0), // origin
anchor: new google.maps.Point(0, 0) // anchor
};
var marker = new google.maps.Marker({
position : LatLng,
map: map,
title: "current location",
icon: icon
});
marker.setMap(map);
}
google.maps.event.addDomListener(window, "load", init);
function initSelect(latitude, longitude){
//LatLng = defaultLocation;
mapOptions = {
center: selectedLocation,
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: true
};
mapCanvas = document.getElementById("mapCanvas");
map = new google.maps.Map(mapCanvas, mapOptions);
//To add marker
var icon = {
url: "element3_4/tweetSearch/pointer.png", // url
scaledSize: new google.maps.Size(50, 50), // scaled size
origin: new google.maps.Point(0,0), // origin
anchor: new google.maps.Point(0, 0) // anchor
};
var marker = new google.maps.Marker({
position : LatLng,
map: map,
title: "current location",
icon: icon
});
marker.setMap(map);
}
$("#search").click(function(){
var query = $("#keyword").val();
query = $.trim(query);
if(query != ""){
search(query);
}else{
$("#tweetResult").html("");
}
});
function search(query){
var url = "element3_4/tweetSearch/search.php";
$.post(url, {query:query}, function(tweets){
var geoEnabled = false;
var user = "";
var place = "";
var parseStr = "<table id='searchResult'> ";
parseStr += " <thead>" ;
parseStr += " <tr>";
parseStr += " <th>Image</th> ";
parseStr += " <th>Name</th> ";
parseStr += " <th>Tweet</th> ";
parseStr += " <th>Date</th>";
parseStr += " </tr> ";
parseStr += " </thead>";
parseStr += "<tbody> ";
$("#tweetResult").html("");
for(var i=0; i<tweets.statuses.length; i++){
user = tweets.statuses[i].user.screen_name;
parseStr += "<tr>";
parseStr += "<td><img src='"+ tweets.statuses[i].user.profile_image_url + "'alt='"+ user +"'/></td>";
parseStr += " <td>" + user + "</td>";
parseStr += "<td>"+tweets.statuses[i].text+"</td>";
parseStr += "<td>"+tweets.statuses[i].created_at+"</td>";
geoEnabled = user.geo_enabled;
if(geoEnabled){
place = tweets.statuses[i].place;
if(place != null){
// place.name
// place.country
var Lat = parseFloat(place.bounding_box.coordinates[0][0][1]);
var Lgt = parseFloat(place.bounding_box.coordinates[0][0][0]);
selectedLocation = new google.maps.LatLng(Lat, Lgt); //Mouseover location
}else{
selectedLocation = "";
}
}else{
selectedLocation = "";
}
parseStr += "<div data-Lat=" + Lat + " data-Lng=" + Lgt + ">" + selectedLocation + "</div>";
parseStr += "</tr>";
}
parseStr += "</tbody> ";
parseStr +="</table>";
$("#tweetResult").append(parseStr);
$("#tweetResult").mouseenter(function(){
var LAT = parseFloat($(this).attr("data-Lat"));
var LGT = parseFloat($(this).attr("data-Lng"));
console.log(LAT + LGT);
initSelect(LAT, LGT);
});
$("#tweetResult ").mouseleave(function(){
init();
});
});
}
function refresh(){
var url = "element3_4/tweetSearch/search.php";
query="cm655";
$.post(url, {query:query}, function(tweets){
var geoEnabled = false;
var user = "";
var place = "";
var parseStr = "<table id='searchResult'> ";
parseStr += "<thead>" ;
parseStr += "<tr>";
parseStr += "<th>Image</th> ";
parseStr += "<th>Name</th> ";
parseStr += "<th>Tweet</th> ";
parseStr += "<th>Date</th>";
parseStr += "</tr> ";
parseStr += "</thead>";
parseStr += " <tbody> ";
$("#tweetResult").html("");
for(var i=0; i<tweets.statuses.length; i++){
user = tweets.statuses[i].user.screen_name;
parseStr += "<tr data-Lat=" + Lat + " data-Lng=" + Lgt + ">";
parseStr += "<td><img src='"+ tweets.statuses[i].user.profile_image_url + "' alt= '"+ user +"'/></td>";
parseStr += " <td>" + user + "</td>";
parseStr += "<td>"+tweets.statuses[i].text+"</td>";
parseStr += "<td>"+tweets.statuses[i].created_at+"</td>";
geoEnabled = user.geo_enabled;
if(geoEnabled){
place = tweets.statuses[i].place;
if(place != null){
// place.name
// place.country
var Lat = parseFloat(place.bounding_box.coordinates[0][0][1]);
var Lgt = parseFloat(place.bounding_box.coordinates[0][0][0]);
selectedLocation = new google.maps.LatLng(Lat, Lgt); //Mouseover location
}
else{
selectedLocation = "";
}
}
else{
selectedLocation = "";
}
parseStr += "</tr>";
}
parseStr += "</tbody> ";
parseStr +="</table>";
$("#tweetResult").append(parseStr);
$("#tweetResult tr").mouseenter(function(){
var LAT = parseFloat($(this).attr("data-Lat"));
var LGT = parseFloat($(this).attr("data-Lng"));
initSelect(LAT, LGT);
});
$("#tweetResult tr").mouseleave(function(){
init();
});
});
}
});
However, it not trigger the mouse over function as expected. The error show "InvalidValueError: setCenter: not a LatLng or LatLngLiteral: not an Object". Is this means my LatLng is not define?? How can I fix this?
