I'm working with Google Maps v3 and I use the MarkerManager to hide the markers on a certain zoom level. I bind circle objects to these markers. Anyway, they aren't hided when the markers are. How can I bind the circles to hide with the markers?
The binding:
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat,lng),
});
var circle = new google.maps.Circle({
map: map,
radius: 50,
});
circle.bindTo('center', marker, 'position');
Array.push(marker);
Did you solved your problem? If not add this:
circle.bindTo('map', marker);
Related
I have checked multiple similar posts on SO but haven't yet found the answer. I have a Google map app that when you Zoom in the marker changes from an icon to a circle. It works great. The Marker icon is replaced by the circle object. But, I also want it to work in reverse: As you zoom out, I want to remove the circle and replace it with the icon. I can get the icon to "reappear" but I can't figure out a way to get a reference to the circle object that is bound to the Marker so I can remove it.
This is NOT the complete code that I am using but to satisfy the request for something MINIMAL rather than complete, this would create the issue:
var marker;
createamarker();
removeCircle();
function createamarker(){
marker = new google.maps.Marker({
position: location,
map: map,
icon: icon,
// Add some custom properties
obscure:obscure,
originalpin: icon
});
// Add circle overlay and bind to marker
var circle = new google.maps.Circle({
map: map,
radius: 1000, // in metres
fillColor: '#AA0000'
});
// Bind it to the marker
circle.bindTo('center', marker, 'position');
}
I also have a second function that is SUPPOSED to remove the circle:
function removeCircle(){
// remove whatever is there
marker.setMap(null);
var icon = {
url: marker.originalpin,
scaledSize: new google.maps.Size(22,32)
}
// reset the marker icon
marker.icon = icon;
//sets the marker back
marker.setMap(map);
// NOW REMOVE the circle:
// So at this point I am stuck. I have bound a circle to
// the marker but in order to REMOVE the circle I need a
// reference to it. Other SO postings suggest acting on the
// circle object directly like so:
circle.setMap(null);
// but the "circle" doesn't exist here. It was bound to the marker in another function. I need a reference to the circle that was bound to the marker so I can act on it.
}
To do what you are looking to do, one option would be to set the circle as a property of the marker:
marker.circle = circle;
Then you can hide the circle like this:
marker.circle.setMap(null);
Note that this won't work if the circle is global, it needs to be local to the createamarker function.
proof of concept fiddle
code snippet:
var map;
function initialize() {
map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = createamarker(map.getCenter());
removeCircle(marker);
var marker2 = createamarker(new google.maps.LatLng(37.45, -122.14));
google.maps.event.addDomListener(document.getElementById('toggle'), 'click', function() {
marker.circle.setMap(marker.circle.getMap() == null ? map : null);
marker2.circle.setMap(marker2.circle.getMap() == null ? map : null);
});
}
google.maps.event.addDomListener(window, "load", initialize);
function createamarker(location) {
var icon = "http://maps.google.com/mapfiles/ms/micons/blue.png";
marker = new google.maps.Marker({
position: location,
map: map,
icon: icon,
// Add some custom properties
// obscure: obscure,
originalpin: icon
});
// Add circle overlay and bind to marker
var circle = new google.maps.Circle({
map: map,
radius: 1000, // in metres
fillColor: '#AA0000'
});
// Bind it to the marker
circle.bindTo('center', marker, 'position');
marker.circle = circle;
return marker;
}
function removeCircle(marker) {
// remove whatever is there
marker.setMap(null);
var icon = {
url: marker.originalpin,
scaledSize: new google.maps.Size(22, 32)
}
// reset the marker icon
marker.icon = icon;
//sets the marker back
marker.setMap(map);
// NOW REMOVE the circle:
// So at this point I am stuck. I have bound a circle to
// the marker but in order to REMOVE the circle I need a
// reference to it. Other SO postings suggest acting on the
// circle object directly like so:
marker.circle.setMap(null);
// but the "circle" doesn't exist here. It was bound to the marker in another function. I need a reference to the circle that was bound to the marker so I can act on it.
}
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<input type="button" value="toggle circle" id="toggle" />
<div id="map_canvas"></div>
When using the following code to add a Marker to an on page Google Map
var myMarker4 = new google.maps.Marker({ position: new google.maps.LatLng(53.53, -2.5), map: map, icon: '/_Content/images/light-pink-marker-map.png' });
Is there a way (call back?) for me to detect when the user has hovered over the marker so I can do something on the current page?
I have several markers, so I would need someway to uniquely identify each.
Isn't this what you're looking for?
var myMarker4 = new google.maps.Marker({ position: new google.maps.LatLng(53.53, -2.5), map: map, icon: '/_Content/images/light-pink-marker-map.png' });
google.maps.event.addListener(myMarker4, 'mouseover', function() {
doSomething...
});
By the way, here's the full list of events that a marker can handle:
'click'
'dblclick'
'mouseup'
'mousedown'
'mouseover'
'mouseout'
I have multiple markers on a map that I want the ability to pan between. The idea being that if you click Marker 1 it will pan to Marker 1 being centered, and then if you click Marker 2 it will pan from Marker 1 to Marker 2. I've got the pan to work fine initially, but it won't pan from one marker to another without the user moving the map first.
The current code I'm using is:
google.maps.event.addListener(marker, 'click', function() {
map.panTo(marker.getPosition());
});
I'm thinking there might be something I'm unaware of when it comes to using multiple marker event listeners in a row (maybe? I'm not sure).
Here's the functioning example as I'm encountering it now:
http://kolosk.us/pan/
Hopefully that's clear, let me know if you can help. Thanks!
There is only one marker variable in your code, left at the last marker created by the loop. The usual solution is to use function closure, associates a unique copy of the marker variable with each event listener.
for (var i = 0; i < locations.length; i++) {
var beach = locations[i];
var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
//icon: image,
//shape: shape,
title: beach[0],
zIndex: beach[3]
});
google.maps.event.addListener(marker, 'click', (function(marker) {
return function() {
map.panTo(marker.getPosition());
}
})(marker));
}
working example
i am using multiple infoWindows in my Google Maps for some positions.
But how can i avoid overlapping of these infowindows? is it possible to make the infowindow draggable?
thanks in advance
for r_klt in c_klt
loop
htp.print('
var geocoder = new google.maps.LatLng('||r_klt.geoloc||''||');
var marker = new google.maps.Marker(
{
position: geocoder
,map: map
,animation:google.maps.Animation.DROP
,icon: '''||r_klt.img||'''
,title:" Marker: '||r_klt.MARKER_NAME||''||'"
});
var styles = [{stylers:[{saturation:-100}]}];
map.setOptions({styles: styles});
var content = ''<div style="font-size:10px;margin-top:0px;padding-top:0px;">'||r_klt.MARKER_NAME||'<br>'||r_klt.strasse||', '||r_klt.plz||' ' ||r_klt.ort||'</div>'';
var infowindow = new google.maps.InfoWindow();
infowindow.setContent(content);
google.maps.event.addListener(marker,''click'',infoCallback(infowindow, marker));
');
end loop;
Infowindows are not draggable.
possible option: create a draggable marker at the infowindow's position.
Bind the position-property of the infowindow to the position-property of the marker. When you drag the marker, the infowindow will be dragged too.
Note: when you already have a marker and use this marker as 2nd argument to the open-method of the infoWindow the position will be bound automatically, you only need to make the marker draggable.
Previously I get an answer to the linking of an element. My next question is: how can I get the "radius" parameter of a binded circle, from the marker?
The code:
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat,lng),
});
var circle = new google.maps.Circle({
map: map,
radius: 50,
});
circle.bindTo('map', marker);
circle.bindTo('center', marker, 'position');
Array.push(marker);
I need the cirlce's radius, which binded to the Array[x] marker. Any idea? Thanks in advance!
I don't think there's a way to get a bound object from an object.
What you can do is set the circle as an object on the marker
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat,lng),
});
var circle = new google.maps.Circle({
map: map,
radius: 50,
});
marker.circle = circle; // Add the circle object to the map object
circle.bindTo('map', marker);
circle.bindTo('center', marker, 'position');
Array.push(marker);
Now you can get the radius with
Array[x].circle.getRadius();
Working example