Employing a variation on function attachSecretMessage and using a mousedown event, I am able to include the marker's title property as a Closure, but on the desktop platform, when a user clicks on the marker and then moves the mouse out of the opened infowindow, the map is dragged until the user clicks somewhere else (I don't know yet what happens on the mobile platform). I have attempted to remove the draggable feature of the map, but unsuccessfully. Can the draggability of the map be defeated?
function attachClickMessage(marker, message) {
var infowindow = new google.maps.InfoWindow(
{ content: message, size: new google.maps.Size(50,50) });
google.maps.event.addListener(marker, 'mousedown', function() {
map.draggable = false;
infowindow.open(map,marker);
});
}
Oops. It appears that simply resequencing the javascript instructions defeats the drag. I moved the map.draggable = false; after the info window.open() and no more dragging.
function attachClickMessage(marker, message) {
var infowindow = new google.maps.InfoWindow(
{ content: message, size: new google.maps.Size(50,50) });
google.maps.event.addListener(marker, 'mousedown', function() {
infowindow.open(map,marker);
map.draggable = false;
});
}
Related
Guys after a long R&D I was able to draw a circle and put markers which are inside that area of circle based on position and radius.
I'm calling a function which triggers whenever the radius or the position of the circle changes..
It is working fine( function triggers and it fetches the markers from the database.) but the function is called when the circle is being dragged(some 100 times). i want that function to called OnDragComplete.. i didn't find any such events Google API..
below is my code.. Any help would be greatly appreciated.
google.maps.event.addListener(distanceWidget, 'distance_changed', function() {
displayInfo(distanceWidget);
searchLocations();
});
google.maps.event.addListener(distanceWidget, 'position_changed', function() {
displayInfo(distanceWidget);
searchLocations();
});
You could add a "dragging" property to the widget on the mouse events and check it in your other functions:
google.maps.event.addListener(distanceWidget, 'mousedown', function() {
distanceWidget.dragging = true;
});
google.maps.event.addListener(distanceWidget, 'mouseup', function() {
distanceWidget.dragging = false;
});
google.maps.event.addListener(distanceWidget, 'position_changed', function() {
if (distanceWidget.dragging === false) {
displayInfo(distanceWidget);
searchLocations();
}
});
I too faced this issue. we can use drag and dragend event listener inside
DistanceWidget function and use marker instance to listen
function DistanceWidget(map) {
this.set('map', map);
this.set('position', map.getCenter());
var marker = new google.maps.Marker({
lat: $('input[name=lat]').val(),
lng: $('input[name=lng]').val(),
draggable: true,
crossOnDrag: false,
cursor: 'crosshair',
title: 'Drag to change circle radius!',
icon: 'assets/front/images/pin.png',
});
google.maps.event.addListener(marker, 'drag', function(e) {
console.log('starting');
});
google.maps.event.addListener(marker, 'dragend', function(e) {
// Trigger once u drop the widget marker
console.log('end');
});
}
I am trying to capture when the pegman icon is dropped on the google maps and send the panorama position and zoom to server. The code below is for listening to visible_changed event. But the thePanorama.getZoom() and getPosition() return undefined.
thePanorama = map.getStreetView();
streetviewChangeListener = google.maps.event.addListener(thePanorama, 'visible_changed', function() {
console.log('visible_changed ');
console.log('streetview panorama position: ' + thePanorama.getPosition() + ' zoom: ' + thePanorama.getZoom());
emitStreetViewEvents({position: thePanorama.getPosition(), zoom: thePanorama.getZoom()});
});
Help?
unfortunately I had a simulare problem, calculating the distance between markers en panorama position to hide and show the markers.
I concluded that with the visible_changed you get the position from before the change.
To get this working I had to add an extra listener for the position_changes.
In my code I have to kinds of markers, one kind linking to panorama's and one linking to external websites, both visible in map mode. In panorama mode the panorama markers are hidden. The website markers are checked with distance from the panorama position and showing only the markers in a certain distance.
google.maps.event.addListener(panorama, 'visible_changed', function() {
if (panorama.getVisible()) {
hideMarkers();
checkZelfstudies();
} else {
showMarkers();
showZelfstudies();
}
});
google.maps.event.addListener(panorama, 'position_changed', function() {
checkZelfstudies();
});
https://developers.google.com/maps/documentation/javascript/streetview?hl=nl#StreetViewEvents
Hope this helps you solving your problem. It works in my code.
I just encode something for update the position and zoom when the pegman is dropped in google maps version 3, so, using your variables and adding some others lines, maybe it will help you:
var marker;
var latlng;
var map;
var panorama;
function initialize(position) {
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'), panoramaOptions);
thePanorama.setStreetView(panorama);
google.maps.event.addListener(panorama, 'position_changed', function() {
marker.setMap(null);
marker = new google.maps.Marker({
position: panorama.getPosition(),
map: map,
draggable: false
});
map.setCenter(marker.getPosition());
console.log(marker.position.lat());
console.log(marker.position.lng());
});
google.maps.event.addListener(map, 'zoom_changed', function() {
console.log('zoom_changed');
console.log(thePanorama.getZoom());
});
google.maps.event.addListener(panorama, 'pano_changed', function() {
console.log(panorama.getPano());
});
google.maps.event.addListener(panorama, 'pov_changed', function() {
console.log(panorama.getPov().heading % 360);
console.log(panorama.getPov().pitch);
});
}
I hope it works for you, greetings.
i have an infowindow that has an "erase entry" button, that when clicked, removes the marker and closes the info window.
when i click the "erase entry" button, it removes the marker and closes the infowindow just fine, but it also registers another click on map, and i have no idea why, and it's driving me nuts.
has anyone bumped into this problem before?
i'm quite a noob at javascript, so any suggestions on implementation would be great too. thank.
below's pseudocode/summary of what i'm doing:
//global variable to keep track of which was the last marker clicked
var lastMarkerJustClicked;
function load(){
//create the map and everything, add the following listener
google.maps.event.addListener(map, 'click', function (event) {
//firebug has been telling me that after i click "erase entry" and my marker is removed and my infowindow closes, i end up here
makeParticularMarker(event.latLng);
});
}
function makeParticularMarker(marker_parameter) {
var markerLocation = //do stuff to get the right marker parameter
var markerWithLocation = new google.maps.Marker({
position: markerLocation,
map: map
});
var html = "<input type='button' value='Erase Entry' onclick=eraseEntry() />"
var markerWithInfo = createMarkerWithHTML(markerWithLocation, html);
}
function createMarkerWithHTML(markerWithLocation, html) {
var markerWithInfo = google.maps.event.addListener(markerWithLocation, 'click', function () {
infoWindow.setContent(html);
infoWindow.open(map, markerWithLocation)
lastMarkerJustClicked=markerWithLocation;
});
}
function eraseEntry() {
infoWindow.close()
lastMarkerJustClicked.setMap(null);
}
i found the answer here: http://groups.google.com/group/google-maps-js-api-v3/browse_thread/thread/221876cc70bea9c6?pli=1
it has to do with propagation. and you stop it by doing something like this
function doSomething(e)
{
if (!e) var e = window.event;
e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation();
}
this site gives a better explanation about this: http://www.quirksmode.org/js/events_order.html
I created a google maps (api v3) with the number of markers depending on the search results. When I click a marker, it opens an infowindow. What's the best way to have that infowindow show information associated to its marker? The information related to all the markers is in a json object I receive from an ajax request.
for (i=0; i < result.point.length; i++) {
var latLng = new google.maps.LatLng(result.proint[i].Latitude,result.point[i].Longitude);
var marker = new google.maps.Marker({
position: latLng,
title: i.toString()
//map: map
});
markersArray.push(marker);
var infowindow = new google.maps.InfoWindow({
content: 'specific information associated to the marker clicked'
});
google.maps.event.addListener(markersArray[i], 'click', function(event) {
infowindow.open(map, this);
});
Create only 1 infoWindow as suggested above.
The content store inside the marker:
var marker = new google.maps.Marker({
position: latLng,
title: i.toString(),
//set your content here
content:'your specific content'
//map: map
});
The opening of the window:
google.maps.event.addListener(markersArray[i], 'click', function(event) {
infoWindow.setContent(this.content);
infowindow.open(map, this);
});
First, you should move the the creation of the infoWindow out of the for loop.
Next, change where you attach the click event to this:
google.maps.event.addListener(markersArray[i], 'click', function(content) {
return function(event){
infowindow.setContent(content);
infowindow.open(map, this);
}
}(WHATEVER_THE_CONTENT_SHOULD_BE_FOR_THIS_MARKER));
You want to use this instead of marker. this will refer to the object the event took place on, while marker will refer to the last marker created.
You have some typos in your example (proint) At the top of you loop:
for (i=0; i < result.point.length; i++) {
var info_window_content = result.point[i].Latitude + '<br />';
info_window_content += result.point[i].Longitue + '<br />';
// etc for any value in you json object
// create your marker as is.
...
var infowindow = new google.maps.InfoWindow({
content: info_window_content
});
// etc, etc.
You do need to add an eventListener to each marker, as you are doing. I don't see any problem with that.
Except I'd use infoWindow.open(map, marker) vs. this.
There is probably a more efficient way to do it, i.e. after infoWindow.open(); infoWindow.setContent(info_window_content)
Try this, it works I tested it already
// Add markers
for (i=0; i < result.point.length; i++) {
var latLng = new google.maps.LatLng(result.proint[i].Latitude, result.point[i].Longitude);
var marker = new google.maps.Marker({
position: latLng,
title: i.toString()
//map: map
});
// marker info start
var infowindow = new google.maps.InfoWindow();
(function (marker, result.point[i]) {
// add click event
google.maps.event.addListener(marker, 'click', function() {
var infoContent: "specific information associated to the marker clicked"
});
infoWindow.setContent(infoContent);
infowindow.open(map, marker);
});
// selected marker 4 infowindow
(marker, result.point[i]);
markersArray.push(marker);
}
Not entirely sure what it is you are trying to do. Where/ what content are you trying to load?
google.maps.event.addListener(marker, 'click', (function(event, index) {
return function(){
infowindow.content = markersArray[index].yourcontent;
// or
infowindow.content = yourcontentarray[index];
infowindow.open(map,this);
}
})(marker,i));
Make sure you declare your marker and infowindow variables outside of a function.
I'm trying to have the functionality to where I can mouseover and mouseout on markers and pop the infowindow up and auto close it. Then when a user clicks on a marker I disable the mouseout for that marker to display the infowindow until the user manually closes it. I want to add the mouseout back to the marker when the user clicks the close for the infowindow.
I have this code:
google.maps.event.addListener(marker, 'mouseover', function() {
infowindow.open(map, marker);
});
google.maps.event.addListener(marker, 'mouseout', function() {
//setTimeout(function() { infowindow.close(); }, 3000);
infowindow.close(map, marker);
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
google.maps.event.clearListeners(marker, 'mouseout');
});
I'm trying to use the 'click' event to disable the 'mouseout'. The above works. Now I want to add back the 'mouseout' event after the infowindow is closed using the 'closeclick' below.
google.maps.event.addListener(infowindow, 'closeclick', function() {
//google.maps.event.addListener(marker, 'mouseout', "");
});
I'm not sure how to do it. Can someone point me in the right direction?
I figured this out and thought I'd share:
function attachData(marker, number) {
//snipped code that adds the events that are removed in closeMarker
google.maps.event.addListener(infowindow, 'closeclick', function() {
closeMarker(marker, number);
});
}
The closeMarker function clears all current events and adds them back by calling the attachData function.
function closeMarker(marker, number) {
google.maps.event.clearListeners(marker, 'mouseover');
google.maps.event.clearListeners(marker, 'mouseout');
google.maps.event.clearListeners(marker, 'click');
google.maps.event.clearListeners(marker, 'closeclick');
attachData(marker, number);
}