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
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>
I know I can make a marker with a tooltip that shows "SOMETHING" like this:
marker = new google.maps.Marker({
position: new google.maps.LatLng(lat,lon),
map: map,
draggable: true,
title:"SOMETHING",
icon: '/public/markers-map/male-2.png'
});
I want to do the same with a circle but title doesn't work.
new google.maps.Circle({
center: new google.maps.LatLng(lat,lon),
radius: 20,
strokeColor: "blue",
strokeOpacity: 1,
title:"SOMETHING",
strokeWeight: 1,
fillColor: "blue",
fillOpacity: 1,
map: map
});
It prints the circle but does not show the message "SOMETHING".
How can I do it? is there another property to get it?
Thanks in advance.
The tooltip is created via the native title-attribute of DOM-elements, but the API doesn't provide any method to access the DOMElement that contains the circle.
A possible workaround may be to use the title-attribute of the map-div instead(set it onmouseover and remove it onmouseout)
//circle is the google.maps.Circle-instance
google.maps.event.addListener(circle,'mouseover',function(){
this.getMap().getDiv().setAttribute('title',this.get('title'));});
google.maps.event.addListener(circle,'mouseout',function(){
this.getMap().getDiv().removeAttribute('title');});
You can also use InfoWindow instead of html title attribute, as the title may not show up always on mouse over. InfoWindow looks pretty good.
var infowindow = new google.maps.InfoWindow({});
var marker = new google.maps.Marker({
map: map
});
Then use same mouseover event mechanism to show the InfoWindow:
google.maps.event.addListener(circle, 'mouseover', function () {
if (typeof this.title !== "undefined") {
marker.setPosition(this.getCenter()); // get circle's center
infowindow.setContent("<b>" + this.title + "</b>"); // set content
infowindow.open(map, marker); // open at marker's location
marker.setVisible(false); // hide the marker
}
});
google.maps.event.addListener(circle, 'mouseout', function () {
infowindow.close();
});
Also we can add event listener direct on google.maps.Circle instance.
Code sample:
//circle is the google.maps.Circle-instance
circle.addListener('mouseover',function(){
this.getMap().getDiv().setAttribute('title',this.get('title'));
});
circle.addListener('mouseout',function(){
this.getMap().getDiv().removeAttribute('title');
});
Just wrote for alternative!
I am using google maps api. I want to have two mouse events ready to trigger at one time. Below is a code snipit.
function initialize() {
var myLatlng = new google.maps.LatLng(37.4419, -122.1419);
var myOptions = {
zoom: 13,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var polyOptions = {
strokeColor: '#000000',
strokeOpacity: 1.0,
strokeWeight: 3 }
poly = new google.maps.Polyline(polyOptions);
poly.setMap(map);
// Add a listener for the click event
google.maps.event.addListener(map, 'click', addLatLng);
}
function addLatLng(event) {
var path = poly.getPath();
if(!draw)
{
path.push(event.latLng);
path.push(event.latLng);
draw = true;
// Add a new marker at the new plotted point on the polyline.
var marker = new google.maps.Marker({
position: event.latLng,
title: '#' + path.getLength(),
map: map });
google.maps.event.addListener(map, 'mousemove', moveTrackLine);
}
else
{
path.push(event.latLng);
var marker = new google.maps.Marker({
position: event.latLng,
title: '#' + path.getLength(),
map: map });
draw = false;
}
}
function moveTrackLine(event) {
var path = poly.getPath();
// replace the old point with a new one to update the track
path.pop();
path.push(event.latLng);
}
When I click on the map the first time I see a marker placed on the map. Then when the mouse is moved I see the polyline update and follow my curser correctly. Next if I click on the map I do not see a marker placed on the map nor do I ever go into the addLatLng function. Thanks in advance for your help and time.
-tim
set the clickable-option of the polyline to false.
The issue: As soon as the mousemove-event is applied to the map, you will not be able to click on the map anymore, because below the mouse-cursor is always the polyline.
When you set the clickable-option of the polyline to false, the polyline does not respond to mouse-events and the click-event will be passed to the map.
I have a working version of map with a draggable marker. Zoom-in to include all markers works
bounds.extend(results[0].geometry.location);
map.fitBounds(bounds);
where results[0].geometry.location is new draggable location.
This works if the new location is forming a bigger area. But when I drag the marker to a closer location to the rest of the markers, I don't think this extends the bounds and therefore, no zoom-in.
Any idea?
When you drop the marker, add the marker position to a temporary LatLngBounds object that includes the original bounds and fit the maps bounds to that on each drag drop.
var mapOptions = {
center: new google.maps.LatLng(38.68551, -96.341308),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
var bounds = new google.maps.LatLngBounds(),
markers = [];
markers.push(new google.maps.Marker({position: new google.maps.LatLng(38.69, -96.14),map: map}));
markers.push(new google.maps.Marker({position: new google.maps.LatLng(38.65, -96.44),map: map}));
markers.push(new google.maps.Marker({position: new google.maps.LatLng(38.56, -96.56),map: map}));
markers.push(new google.maps.Marker({position: new google.maps.LatLng(38.42, -96.98),map: map}));
markers.push(new google.maps.Marker({position: new google.maps.LatLng(38.31, -96.45),map: map}));
for (var m in markers) {
bounds.extend(markers[m].getPosition());
}
map.fitBounds(bounds);
var dropMarker = function(latlng) {
var marker = new google.maps.Marker({position: latlng, map: map}),
tempBounds = new google.maps.LatLngBounds();
// notice we use the union method here to add the original bounds object
tempBounds.union(bounds).extend(marker.getPosition());
map.fitBounds(tempBounds);
}
// imitate dropping marker far away from others
setTimeout(function() {
dropMarker(new google.maps.LatLng(31, -96));
}, 2000);
// imitate dropping marker close to others
setTimeout(function() {
dropMarker(new google.maps.LatLng(38.5, -96.5));
}, 5000);
Instead of just fitting the temporary bounds you could try the map panToBounds method to get a nice smooth transition.
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);