I'm trying to have this so that someone clicks on the map, and an infoWindow pops up telling them that latlng. For now, just trying to figure out how to get an infoWindow to come up. I found a similar problem here with markers and edited the function a bit but I'm missing something which I'm sure is simple and I just cannot pin point. Here's the code:
function InfoWindow(location) {
if ( marker ) {
marker.setPosition(location);
} else {
marker = new google.maps.infoWindow({
position: location,
content: "sam"
});
}
}
google.maps.event.addListener(map, 'click', function(event) {
InfoWindow(event.latLng);
});
}
Help greatly appreciated!
Thanks
I am using InfoBubble, it appears better than InfoWindow and it can also be handled easier. Try it.
Event is a LatLng
google.maps.event.addListener(map, 'click', function(event) {
InfoWindow(event);
});
You were correct in passing the LatLng of the event (event.latLng), not the whole event. To help with the output, I included code that splits the lat and lng up into strings. A couple other things I fixed: needs to be a capital "I" in google.maps.InfoWindow; set the content to new latLng if the window already exists; added the code to actually open the window at the end. This should take care of everything for ya
function InfoWindow(location) {
var lat = location.lat().toString();
var lng = location.lng().toString();
var new_content = "Lat: " + lat + "<br />Long: " + lng
if ( marker ) {
marker.setPosition(location);
marker.setContent(new_content);
} else {
marker = new google.maps.InfoWindow({
position: location,
content: new_content
});
}
marker.open(map);
}
google.maps.event.addListener(map, 'click', function(event) {
InfoWindow(event.latLng);
});
The Map MouseEvent has a latLng property
google.maps.event.addListener(map, 'click', function(event)
{
new google.maps.InfoWindow({
map:map,
content:"coordinates:"+event.latLng.toUrlValue(),
position:event.latLng});});
}
"map" is a reference to your google.maps.Map.
Tested on this map by pasting this into the address bar, then clicking on the map:
javascript:google.maps.event.addListener(map, 'click', function(event) {new google.maps.InfoWindow({map:map, content:"coordinates:"+event.latLng.toUrlValue(),position:event.latLng});});
Related
My map has no markers. In response to a click on the map, it pops up an infowindow with Lat/long shown in decimal to 5 dp and in Degrees minutes seconds. An open window is always closed prior to responding to a new click. The position is specified by position: latLng, but the infowindow is ALWAYS at the top left. I've spent days on this, and I feel I'm missing something. Code snippet below. Any ideas?
google.maps.event.addListener(map, 'click', function (event) {
var lat = event.latLng.lat(),
lng = event.latLng.lng(),
latLng = event.latLng,
strHtml;
//
// strHtml build code omitted but succesfully uses lat and lng to produce
// e.g. Latitude : 51.72229 N (51° 43' 20'' N)
// Longitude : 1.45827 E (1° 27' 30'' E)
//
// If an infowindow is open, then close it
if (openedInfoWindow != null) openedInfoWindow.close();
// latLng monitored to check it is there before use in infowindow
alert(latLng); // returns correct values which position then ignores!
var infoWindow = new google.maps.InfoWindow({
position: latLng,
content: strHtml,
maxWidth: 420
});
// Open infoWindow
infoWindow.open(map,this);
// Remember the opened window
openedInfoWindow = infoWindow;
// Close it if X box clicked
google.maps.event.addListener(infoWindow, 'closeclick', function() {
openedInfoWindow = null;
});
});
You have several problems with this code. The second parameter of the infowindow's open method has to be an MVCObject in the Core API only the Marker class can be used as an anchor. You should not need to set the infowindow variable to null and create a new infowindow object each time. You only need a single infowindow and then change its content and position. This way there is only one infowindow shown at a time.
Here is a fiddle of a working example: http://jsfiddle.net/bryan_weaver/z3Cdg/
relevant code:
google.maps.event.addListener(map, 'click', function (evt) {
var content = "<div class='infowindow'>";
content += "Latitude: " + evt.latLng.lat() + "<br/>";
content += "Longitude: " + evt.latLng.lng() + "</div>";
HandleInfoWindow(evt.latLng, content);
});
function HandleInfoWindow(latLng, content) {
infoWindow.setContent(content);
infoWindow.setPosition(latLng);
infoWindow.open(map);
}
The 2nd (optional)argument of infoWindow.open() is expected to be an MVCObject that exposes a position-property.
the this argument in the callback refers to a google.maps.Map-Instance(map), which is an MVCObject, but doesn't have a position-property.
Remove the 2nd argument from infoWindow.open(map,this); .
Can somebody please explain why my Google Maps info windows are only opening at the bottom left marker?
See here for the fiddle http://jsfiddle.net/Vj3nw/7/
When I click on any of the markers, only the bottom-left one is opened. I would like the marker that is clicked to open.
I believe the problem is due to the loop below, and this question seems to have the same problem Setting onclick to use current value of variable in loop
"The problem you were hitting is that javascript doesn't use block scope. Instead all variables have a lifetime of their containing function. So there was only ever one a captured in all of the onclick functions and they all see it's final value."
I just can't quite translate that solution to mine.
Many thanks.
for (var i = 0; i < 4; i++) {
var marker = new google.maps.Marker({
position: flightPlanCoordinates[i],
icon: Symbol,
map: map
});
infowindow = new google.maps.InfoWindow();
infowindow.setContent("hello");
google.maps.event.addListener(marker, 'click', function () {
infowindow.open(map, marker);
});
}
Generating your markers and adding the listeners in their own function, called from the loop like the updated fiddle works.
function create_marker(i,flightPlanCoordinates,Symbol,map){
var marker = new google.maps.Marker({
position: flightPlanCoordinates[i],
icon: Symbol,
map: map
});
infowindow = new google.maps.InfoWindow();
infowindow.setContent("hello" + i);
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
I have a simple enough map on Google Maps V3.
I change the icon image on mouse over listener event, I change it back on mouse out simple enough.
I change the icon again when I click the marker, but, I want to keep that icon while the marker is selected. When I mouse out, the marker icon changes again because I told it to do so in the mouse out listener event.
I need to exclude the selected marker from the mouseout listener event but I can't figure out how to find the marker I have currently selected. Any ideas?
Here is my code
google.maps.event.addListener(marker, 'mouseover', function () {
this.setIcon("images/star-3-white.png");
});
google.maps.event.addListener(marker, 'mouseout', function () {
// this overwrites the image again,
// need to exclude the current one here
this.setIcon("images/star-3.png");
});
google.maps.event.addListener(marker, 'click', function () {
this.setIcon("images/star-3-white.png");
infowindow.setContent(this.html);
infowindow.open(map, this);
});
Either
create a member of the marker .selected and set that when you click on it, then test it in the mouseout function (and the mouseover function if you want to be complete), don't change the icon if it is set.
create a global variable (assuming there is only one marker selected at a time), set that equal to the marker that was clicked. In the mouseout (and mouseover) check if it is equal to the current marker (this), if it is don't change the icon.
A bit long winded but I just added a variable to store the current marker title which I know is unique. I then check to see if it is that one that I am selecting. Also, I make sure to reset all the markers so it doesnt stay the same color as a selected one:
var clickedMarkerTitle = null;
function addMarker(latLng, _title, contentString) {
marker = new google.maps.Marker({
map: map,
position: latLng,
icon: "images/star-3.png",
title: _title,
html: contentString
});
google.maps.event.addListener(marker, 'mouseover', function () {
this.setIcon("images/star-3-white.png");
});
google.maps.event.addListener(marker, 'mouseout', function () {
//this.setIcon("images/star-3.png");
testIcon(this);
});
google.maps.event.addListener(marker, 'click', function () {
resetMarkerIcons();
saveIconState(this);
this.setIcon("images/star-3-white.png");
infowindow.setContent(this.html);
infowindow.open(map, this);
});
markersArray.push(marker);
}
function resetMarkerIcons() {
// reset all the icons back to normal except the one you clicked
for (var i = 0; i < markersArray.length; i++) {
markersArray[i].setIcon("images/star-3.png");
}
}
function saveIconState(marker) {
clickedMarkerTitle = marker.title;
}
function testIcon(marker) {
$('#test').html('<span>' + marker.title + '</span>');
if (clickedMarkerTitle != null) {
$('#test').html('<span>' + marker.title + ' and its not null</span>');
if (marker.title != clickedMarkerTitle) {
$('#test').html('<span>' + marker.title + ' and ' + clickedMarkerTitle + '</span>');
marker.setIcon("images/star-3.png");
}
}
else {
marker.setIcon("images/star-3.png");
}
}
Stumbled on this answer when searching for something else. This will do.
var currentMarker = null;
var markerIcon = 'some.svg';
var markerIconHover = 'some-other.svg';
// Initialize marker here
[...]
// Set current marker on click
google.maps.event.addListener(marker, 'click', function() {
// Reset market icons
clearMarkerIcons();
// Set hovered map marker
marker.setIcon(markerIconHover);
// Set current marker
currentMarker = marker;
// Open infoWindow here
[...]
});
// Set correct icon on mouseover
google.maps.event.addListener(marker, 'mouseover', function() {
marker.setIcon(markerIconHover);
});
// Set correct icon on mouseout
google.maps.event.addListener(marker, 'mouseout', function() {
if (currentMarker !== marker) {
marker.setIcon(markerIcon);
}
});
// Clear all set marker icons
function clearMarkerIcons() {
for (var i = 0; i < map.markers.length; i++) {
map.markers[i].setIcon(markerIcon);
}
}
GMaps v3 Markers AddListener Problem
I'm trying to add mouseover/mouseout event listener to my markers, but I get allways the last value of the for loop In all the events, It seems to get the last value of the for instead the current. Here is my code
for( mark in data ) {
markers[mark] = new google.maps.Marker({
position: new google.maps.LatLng(data[mark].lat,data[mark].lng), map: map,
});
google.maps.event.addListener(markers[mark], "mouseover", function() {
alert(mark);
});
google.maps.event.addListener(markers[mark], "mouseout", function() {
alert(mark);
});
}
The result is an alert on mouse over/out with the same value for all 10 markers and I was expecting the marker id on each alert.
thanks
Regards
The problem you are having is the value of mark is global and is left set to the last value in the loop. The issue can be fixed with a function closure. I think this will work (not tested):
function createMarker(latlng, id)
{
var marker= new google.maps.Marker({
position: latlng, map: map,
});
google.maps.event.addListener(marker, "mouseover", function() {
alert(id);
});
google.maps.event.addListener(marker, "mouseout", function() {
alert(id);
});
return marker;
}
for( mark in data ) {
markers[mark] = createMarker(new google.maps.LatLng(data[mark].lat,data[mark].lng),
mark);
}
My Code looks like this:
var map = /*some google map - defined earlier in the code*/;
var geocoder = new google.maps.Geocoder();
var address = 'Some Address, Some Street, Some Place';
geocoder.geocode({'address':address},function(results,status){
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var infobox = new google.maps.InfoWindow({
content: 'Hello world'
});
for(i in results){
var marker = new google.maps.Marker({
map: map,
position: results[i].geometry.location
});
google.maps.event.addListener(marker, 'click', function() {
infobox.setContent('blablabla');
infobox.open(map,marker);
alert(infobox.content); //displays 'blablabla'
});
}
}
});
Basically it's creating some markers on a single map based on a given address-string. It adds an infoWindow to the markers that opens on click.
Problem is: the infoWindow displays empty.
Screenshot here:
PS: Using Maps API V3
I just ran into the same problem, and found the very simple cause of it: The text in the info window was actually displayed, but in white color, and therefore just not visible on the white background. Giving the content a different color via CSS solved the problem for me.
Basically you need to use a function external to your marker adding-loop to add the infobox message to each marker... for an example and detailed explanation see:
http://code.google.com/apis/maps/documentation/javascript/events.html#EventClosures
Here is how I have done it.
var map,markersArray,infowindow; //infowindow has been declared as a global variable.
function initialize(){
var myOptions = {
zoom: 14,
center: new google.maps.LatLng(51.5001524,-0.1262362),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
infowindow = new google.maps.InfoWindow(
{
size: new google.maps.Size(150,50)
});
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
markersArray = [];
}
function createMarker(latlng, html,zoom) {
var contentString = html;
var marker = new google.maps.Marker({
position: latlng,
map: map,
zIndex: Math.round(latlng.lat()*-100000)<<5
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map,marker);
});
marker.MyZoom = zoom;
return marker;
}
You can find the working example here and the complete javascript here.
I have resolved issue by adding below code.
setTimeout(function () { GeocodeMarker.info.open(GoogleMap,
GeocodeMarker); }, 300);
Thanks