I Have retrieved 5 tweets with twitter4j(Java api for twitter) and now I want to display them on google map.
Google map has a javascript api.
Any Idea how could I display them on google map. can this data be sent to google maps directly and display them on google map
One of my result looks as below.
UPDATES FOR QUERY: Party
Location: null
Profile Location: Paris, France
UserName1: SusanClay20
Message: Looking to Book your Christmas Party? See how we can help :)
I want to actually display profile picture on map but I was wondering how this would this be possible.
Do I need to store them some where fist and then display on google maps?
I am really Blank about this and Any comment would be appreciated.
Thanks
Br
In Google Maps, you can utilize info windows to be displayed at certain markers. Some sample code from the Google developer's page:
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
var contentString = '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h2 id="firstHeading" class="firstHeading">Uluru</h2>'+
'<div id="bodyContent">'+
'<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
'sandstone rock formation in the southern part of the '+
'Northern Territory, central Australia. It lies 335 km (208 mi) '+
'south west of the nearest large town, Alice Springs; 450 km '+
'(280 mi) by road. Kata Tjuta and Uluru are the two major '+
'features of the Uluru - Kata Tjuta National Park. Uluru is '+
'sacred to the Pitjantjatjara and Yankunytjatjara, the '+
'Aboriginal people of the area. It has many springs, waterholes, '+
'rock caves and ancient paintings. Uluru is listed as a World '+
'Heritage Site.</p>'+
'<p>Attribution: Uluru, <a href="http://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+
'http://en.wikipedia.org/w/index.php?title=Uluru</a> (last visited June 22, 2009).</p>'+
'</div>'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Uluru (Ayers Rock)"
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
If it's something you're getting through say, AJAX polling then you would turn this into a function that gets called with the location info, and change contentString to be an HTML representation of how you want to display the tweet. The same principle would happen if you're not doing polling and simply want to do it on page load. Instead you would have the function, then utilize the backend system to print out javascript calls of the function with the data to be populated.
Related
Is there a way to have a button on the info that comes up when someone clicks a google map marker.
Im trying to have it be that when a person clicks on one of the marker locations the information that is connected with that marker pops up and then also a message button that causes a message box to pop up when clicked.
I am a super beginner but am learning and would at least be helped to even have someone tell me the exact name of the process Im trying to do even if you dont know how to do it.
When you declare your infowindow, you have to pass the content of your infowindow in parameter. This is an example:
function initMap() {
var uluru = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: uluru
});
var contentString = '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+
'<div id="bodyContent">'+
'<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
'sandstone rock formation in the southern part of the '+
'Northern Territory, central Australia. It lies 335 km (208 mi) '+
'south west of the nearest large town, Alice Springs; 450 km '+
'(280 mi) by road. Kata Tjuta and Uluru are the two major '+
'features of the Uluru - Kata Tjuta National Park. Uluru is '+
'sacred to the Pitjantjatjara and Yankunytjatjara, the '+
'Aboriginal people of the area. It has many springs, waterholes, '+
'rock caves and ancient paintings. Uluru is listed as a World '+
'Heritage Site.</p>'+
'<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+
'https://en.wikipedia.org/w/index.php?title=Uluru</a> '+
'(last visited June 22, 2009).</p>'+
'</div>'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: uluru,
map: map,
title: 'Uluru (Ayers Rock)'
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
}
Here, you define a simple map, a simple marker and an infowindow with a huge text.
You can add a button by adding this code <button type="button">Click Me!</button> in the contentString.
Consult the google's documentation about infowindows and an example of button on w3schools.
It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.
Closed 10 years ago.
Hi i have been using this code to show multiple location on a google map and also dropping pins on each location.
var mylocation = new google.maps.LatLng(52.520816, 13.410186);
var neighborhoods = [
new google.maps.LatLng(52.511467, 13.447179),
new google.maps.LatLng(52.549061, 13.422975),
new google.maps.LatLng(52.497622, 13.396110),
new google.maps.LatLng(52.517683, 13.394393)
];
var markers = [];
var map;
function initialize() {
var mapOptions = {
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: mylocation
};
map = new google.maps.Map(document.getElementById('googleMap'),
mapOptions);
drop();
}
function drop(){
for (var i = 0; i < neighborhoods.length; i++)
{
markers.push(new google.maps.Marker({
position: neighborhoods[i],
map: map,
}));
}
}
what i want is to show info window on all the pins showing their respective lats and lngs
Thanks
function drop()
{
for (var i = 0; i < neighborhoods.length; i++)
{
var marker= new google.maps.Marker({
position: neighborhoods[i],
map: map,
});
var infoWindow = new google.maps.InfoWindow({content:marker.getPosition()});
infoWindow.open(map, marker);
}
}
All the information you need is in the Google maps documentation, in the InfoWindow section, where they show this example:
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
var contentString = '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h2 id="firstHeading" class="firstHeading">Uluru</h2>'+
'<div id="bodyContent">'+
'<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
'sandstone rock formation in the southern part of the '+
'Northern Territory, central Australia. It lies 335 km (208 mi) '+
'south west of the nearest large town, Alice Springs; 450 km '+
'(280 mi) by road. Kata Tjuta and Uluru are the two major '+
'features of the Uluru - Kata Tjuta National Park. Uluru is '+
'sacred to the Pitjantjatjara and Yankunytjatjara, the '+
'Aboriginal people of the area. It has many springs, waterholes, '+
'rock caves and ancient paintings. Uluru is listed as a World '+
'Heritage Site.</p>'+
'<p>Attribution: Uluru, <a href="http://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+
'http://en.wikipedia.org/w/index.php?title=Uluru</a> (last visited June 22, 2009).</p>'+
'</div>'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Uluru (Ayers Rock)"
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
I'm going to have several markers (right now I'm just doing two until I get the structure going) and I'd like to be able to click on external links that open the marker's info box, but when one marker's info box is open the other gets closed. I'd also like to be able to hide and show the markers. So when one button is pushed it hides the first marker, and when the other button is pushed it shows the first one and hides the second.
Right now I have my map set up like this and am unsure where to go from here with how to toggle the visibility setting and the info bubbles.
var LOC_850 = new google.maps.LatLng(42.326435,-71.149499);
var mapOptions = {
zoom: 16,
center: LOC_850,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
var CONTENT_850 = '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+
'<div id="bodyContent">'+
'<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
'sandstone rock formation in the southern part of the '+
'Northern Territory, central Australia. It lies 335 km (208 mi) '+
'south west of the nearest large town, Alice Springs; 450 km '+
'Heritage Site.</p>'+
'</div>';
var INFO_850 = new google.maps.InfoWindow({
content: CONTENT_850
});
var BTN_850 = 'CONTAINER_850';
var MARKER_850 = new google.maps.Marker({
position: LOC_850,
map: map,
title: 'Hello World!'
});
google.maps.event.addListener(MARKER_850, 'click', function() {
INFO_850.open(map,MARKER_850);
});
google.maps.event.addDomListener(document.getElementById(BTN_850), 'click', function() {
INFO_850.open(map,MARKER_850);
});
var LOC_850_60bus_out = new google.maps.LatLng(42.326822,-71.150157);
var CONTENT_850_60bus_out = '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h1 id="firstHeading" class="firstHeading">DIFFERENT</h1>'+
'<div id="bodyContent">'+
'<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
'sandstone rock formation in the southern part of the '+
'Northern Territory, central Australia. It lies 335 km (208 mi) '+
'south west of the nearest large town, Alice Springs; 450 km '+
'Heritage Site.</p>'+
'</div>';
var INFO_850_60bus_out = new google.maps.InfoWindow({
content: CONTENT_850_60bus_out
});
var BTN_850_60bus_out = 'CONTAINER_850_60bus_out';
var MARKER_850_60bus_out = new google.maps.Marker({
position: LOC_850_60bus_out,
map: map,
title: 'Hello World!'
});
google.maps.event.addListener(MARKER_850_60bus_out, 'click', function() {
INFO_850_60bus_out.open(map,MARKER_850_60bus_out);
});
google.maps.event.addDomListener(document.getElementById(BTN_850_60bus_out), 'click',
function() {
INFO_850_60bus_out.open(map,MARKER_850_60bus_out);
});
}
function loadScript() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://maps.googleapis.com/maps/api/js?sensor=false&' +
'callback=initialize';
document.body.appendChild(script);
}
window.onload = loadScript;
</script>
See [this example "categories" map(http://www.geocodezip.com/v3_MW_example_categories.html) (translated from Mike Williams' v2 tutorial example
I has
(what I call) v2 infowindow functionality (single infowindow)
checkboxes that hide/show categories of markers.
I am trying to create a polygon on a google map v3 and display a marker at each LatLng point of the polygon. When you click on any marker an infowindow should display what coordinates the marker is at.
So far, I have plotted a polygon on a map and when you click on it it will display each of the coordinates of the polygon. I need help with the next step. I want to place a marker at each point that will display an infowindow when clicked telling the LatLng coordinates. A link to what I have done so far is at http://www.sugarcube.ie/TEST/googlemaps/conor/polygonPoints.html
Can anyone help?
Hi if you have the coordinates you're practically set:
See here for making markers
Also see here for infowindows on markers
If you need any more help don't be afraid to ask, I have some sample code doing this I'm just not able to access it at the moment, sorry.
Here's the sample code from google on how to create an infowindow:
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var myOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var contentString = '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h2 id="firstHeading" class="firstHeading">Uluru</h2>'+
'<div id="bodyContent">'+
'<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
'sandstone rock formation in the southern part of the '+
'Northern Territory, central Australia. It lies 335 km (208 mi) '+
'south west of the nearest large town, Alice Springs; 450 km '+
'(280 mi) by road. Kata Tjuta and Uluru are the two major '+
'features of the Uluru - Kata Tjuta National Park. Uluru is '+
'sacred to the Pitjantjatjara and Yankunytjatjara, the '+
'Aboriginal people of the area. It has many springs, waterholes, '+
'rock caves and ancient paintings. Uluru is listed as a World '+
'Heritage Site.</p>'+
'<p>Attribution: Uluru, <a href="http://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+
'http://en.wikipedia.org/w/index.php?title=Uluru</a> (last visited June 22, 2009).</p>'+
'</div>'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Uluru (Ayers Rock)"
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
I think your problem lies with the event handler this example only deals with one marker and one infowindow, in your case you will need 2 arrays one for all the markers and one for all the infowindows and some kind of for loop whereby for every marker an event listener is created and it is tied to a specific infowindow, that is exactly what I had to do in my project, I promise I'll upload the code later today I just dont have access to it at the mo,
you're looking for something along the lines
var markers = new Array();
var infowindows - new Array();
//Fill the markers with the co-ordinates needed using push method
//then
for(i=0;i<markers.length;i++)
{
google.maps.event.addListener(markers[i], 'click', function() {
infowindows[i].open(map,markers[i]);
});
}
Hope this helps !!
I'm trying to add a Google map to a website I am developing.
I have managed to include the map, with the correct long & lat coordinates (Using V3 of the API), but I'm having trouble adding a tooltip like you see when clicking a marker
See this URL for details
http://maps.google.co.uk/maps?q=york+web+design&oe=utf-8&rls=org.mozilla:en-GB:official&client=firefox-a&um=1&ie=UTF-8&hl=en&sa=N&tab=wl
When one of those markers is clicked, the tooltip appears, how can I achieve the same result on my small map?
The marker click items are called InfoWindows (google.maps.InfoWindow).
I used the api page for reference when I built our maps, it was really helpful and easy to understand.
http://code.google.com/apis/maps/documentation/javascript/overlays.html#InfoWindows
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var myOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var contentString = '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+
'<div id="bodyContent">'+
'<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
'sandstone rock formation in the southern part of the '+
'Northern Territory, central Australia. It lies 335 km (208 mi) '+
'south west of the nearest large town, Alice Springs; 450 km '+
'(280 mi) by road. Kata Tjuta and Uluru are the two major '+
'features of the Uluru - Kata Tjuta National Park. Uluru is '+
'sacred to the Pitjantjatjara and Yankunytjatjara, the '+
'Aboriginal people of the area. It has many springs, waterholes, '+
'rock caves and ancient paintings. Uluru is listed as a World '+
'Heritage Site.</p>'+
'<p>Attribution: Uluru, <a href="http://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+
'http://en.wikipedia.org/w/index.php?title=Uluru</a> (last visited June 22, 2009).</p>'+
'</div>'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Uluru (Ayers Rock)"
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});