Hello am trying to put some tweets on the google map by firstly extracting the location from text of the tweet using the js-placemaker, yahoo’s web service for geolocating texts from any type of data.
The problem is that am placing the different markers on the map but am getting only the last tweet from twitter resutlts callback and am seeing the same profile_img_url on every marker on the map.I also cant get the infowindows to work.
function codeAddress(){
var geocoder = new google.maps.Geocoder();;
var mapOptions = {
center: new google.maps.LatLng(35.74651,-39.46289),
zoom: 2,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// added this
var bounds = new google.maps.LatLngBounds();
// create the map
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
$.getJSON("http://search.twitter.com/search.json?q=%23euronews&rpp=10&include_entities=true&result_type=mixed&callback=?", function (data) {
$.each(data.results, function (i, item) {
var screen_name = item.screen_name;
var contentString=screen_name;
var img = item.profile_image_url;
var text=item.text;
var profile_img=item.profile_image_url;
var url=(item.entities.urls.length > 0 ? item.entities.urls[0].url : '');
// var latitude,longitude;
Placemaker.getPlaces(text,
function(o){
console.log(o);
var latitude=o.match.place.centroid.latitude,
longitude=o.match.place.centroid.longitude;
var myLatLng = new google.maps.LatLng(latitude, longitude);
var marker = new google.maps.Marker({
icon: img,
title: screen_name,
map: map,
position: myLatLng
});
var infowindow = new google.maps.InfoWindow({
content: contentString
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
bounds.extend(myLatLng);
});
});
// map.fitBounds(bounds);
});
}
Same root problem as this similar question. Can be solved with appropriate use of function closures on the asynchronous callbacks.
Your issue with the infowindow is that there is no content (screen_name and contentString are undefined).