Is it just me or does the google maps api seem to be on the quirky side?
Trying to simply show a marker for some coordinates, and then center the screen on the marker.
In my controller fired from a view:
onGoogleMapRender: function (googleMap) {
var long = record.get("Longitude");
var lat = record.get("Latitude");
var pos = new google.maps.LatLng(lat, long);
var marker = new google.maps.Marker({
position: pos
});
marker.setMap(googleMap);
googleMap.setCenter(marker.getPosition());
googleMap.setZoom(14);
}
It seems to place the marker in the center of the screen but when I return and show the same screen the 2nd, or 3rd time, the marker is added but this time the marker doesn't get centered.
Has anyone got this working correctly? I don't suppose it is any ST2 related but more a quirk of the google api.
You have to center it with a small timeout, than it will work fine.
setTimeout(function() {
googleMap.panTo(marker.getPosition());
}, 100);
I don't know if it's a bug, but this way is shown in the showcase.
Related
I want to know how can I change the position of the marker in the Google Map.
Currently I'm using:
var newlatlong = new google.maps.LatLng(place.geometry.location.lat(), place.geometry.location.lng());
map.setCenter(newlatlong);
marker.setPosition(newlatlong);
map.setZoom(10);
Can I hand code the position of the marker in the map other than the center position?
I mean map.setCenter(newlatlong);, Instead of setCenter Is there any other position available? or can I hand code the position in the map where the marker should appear?
Not sure why you are running the code twice...
But yes, you can pass latitude/longitude values directly to the setCenter method
map.setCenter({lat: -34, lng: 151});
Documentation: https://developers.google.com/maps/documentation/javascript/reference#Map
update after comments
If you want to move the map center so that the marker is specific position (in pixels), you can center on the marker and then use the .panBy method to move the map a fixed amount of pixels.
To create a marker:
var marker = new google.maps.Marker({
map : map,
position : newlatlong
})
to update the position of this marker:
marker.setPosition(newlatlong);
to put the center at the east of marker, for example:
map.setCenter(new LatLng(newlatlong.lat,newlatlong.lng + 1.0))
You can set the center of the map and the marker separately using different longitude and latitudes:
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(41.512318, -72.979349);
};
var marker = new google.maps.Marker({
position: new google.maps.LatLng(41.513001, -72.983845)
});
};
This makes the marker slightly off center to the left. I used this in a current project of mine.
Google Maps doesn't provide a way to break apart multiple markers that are at the same location. This can occur with a people or businesses at a multiple residency location such as an apartment building or professional services building. Depending at zoom level it can also occur at shopping malls, etc.
The way around that is to "spiderfy" them: when clicking on the first it breaks them out with a line to the location. This is done in Google Earth and George MacKerron wrote a package to do that for Google Maps. (https://github.com/jawj/OverlappingMarkerSpiderfier)
It can be integrated with markerclusterer, although it doesn't support marker clusterer's batch creation of markers.
My issue is that the application I'm working on wants to have specific icons for different types of activities. Spiderfier puts one of the markers on top. A person looking at the map has no way of knowing that there can be 10 or more other markers underneath the top marker.
Ideally, there would be a way to put a top marker that displays when there are multiple markers similar to the different icon in markercluster. It isn't a direct 1-to-1 since spiderfier also works when they are close but not exactly at the same location (default is 20 pixels) and markercluster has no provision for accessing multiple markers at the exact same location.
The ideal behavior would be have a special icon for spiders that broke into the spiderfied individual icons when clicked. Similar to markerclusterer, but without the zoom change and handling the same location. The special icon ideally would indicate how many other markers are at the spot, again like markerclusterer. The special icon could be hidden or become part of the spiderfied group.
Without some accommodation users would have no way of knowing multiple activities are at the location. They may even assume that the activity they want is not at that location because another activities marker is shown.
This is a plunker that has the problem: http://plnkr.co/edit/vimZNq?p=info
var markers = [];
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < 100; ++i) {
var latLng = new google.maps.LatLng(Math.floor(Math.random() * 10) / 10 + 39,
Math.floor(Math.random() * 10) / 10 - 100);
var marker = new google.maps.Marker({
position: latLng,
title: "marker " + i + " pos: " + latLng,
maxZoom: 8,
map: map
});
marker.desc = marker.getTitle();
bounds.extend(latLng);
markers.push(marker);
oms.addMarker(marker);
}
map.fitBounds(bounds);
var markerCluster = new MarkerClusterer(map, markers);
Thanks for your help,
David
Here's how I got it to work. Where map is a Gmap instance and oms is an Overlapping Marker Spiderfier instance. We're also using Marker Clusterer on the initial zoom which buys us a break.
map.addListener('zoom_changed', function() {
map.addListenerOnce('idle', function() {
// change spiderable markers to plus sign markers
// we are lucky here in that initial map is completely clustered
// for there is no init listener in oms :(
// so we swap on the first zoom/idle
// and subsequently any other zoom/idle
var spidered = oms.markersNearAnyOtherMarker();
for (var i = 0; i < spidered.length; i ++) {
// this was set when we created the markers
url = spidered[i].icon.url;
// code to manipulate your spidered icon url
};
});
});
oms.addListener('unspiderfy', function(markers) {
var spidered = markers;
for (var i = 0; i < spidered.length; i ++) {
url = spidered[i].icon.url;
// change it back
};
});
oms.addListener('click', function(marker) {
// put the clicked-on marker on top
// when oms un-spiders
marker.zIndex=999;
// set infowindow, panning etc.
});
I managed to match the following Versions:
MarkerClusterer 2.0.13
OverlappingMarkerSpiderfier 3.27
On every creation of a new Marker, i store the initialIconUrl in the Marker Object
var marker = new google.maps.Marker({
position: //some position
});
marker.setIcon(iconUrl);
marker.initialIconUrl = iconUrl;
When declaring the OverlappingMarkerSpiderfier, set the nearbyDistance to 0.001 (or some other very small value).
this.oms = new OverlappingMarkerSpiderfier(this.map, {
markersWontMove: true,
markersWontHide: true,
nearbyDistance: 0.001 //This will only spiderfy the Markers if they have the exact same position
});
Then, we need a listener on the maps 'idle' Event, to format the Markers manually.
I needed this because my SPIDERFIABLE Marker wouldn't show correctly on the first step, when transferring from the Clustered Marker to the seperate Markers.
var me = this;
google.maps.event.addListener(this.map, 'idle', function () {
me.oms.formatMarkers();
});
Listen to the oms 'format' Event and set the iconURL for Markers that are SPIDERFIABLE.
If the Marker is not spiderfiable, reset the Icon to the initial Url.
var spiderfiableIconUrl = //Whatever you need
this.oms.addListener('format', function (marker, status) {
var iconURL = status == OverlappingMarkerSpiderfier.markerStatus.SPIDERFIABLE
? spiderfiableIconUrl :
marker.initialIconUrl;
marker.setIcon(iconURL);
});
Hope this helps.
Some methods seems to be interesting like markersNearAnyOtherMarker but I cannot get it work.
An interesting way could be to use spiderfy and unspiderfy events and change marker when it's fired
overlappingMarkers = new OverlappingMarkerSpiderfier(map, overlapOptions);
overlappingMarkers.addListener('spiderfy', function (markers) {
markers.forEach(function (marker) {
marker.setLabel('*');
marker.setIcon(myNormalIcon);
})
})
overlappingMarkers.addListener('unspiderfy', function (markers) {
markers.forEach(function (marker) {
marker.setLabel(''+markers.length);
marker.setIcon(myOverlapIcon);
})
})
Unfortunatly, the unspiderfy event isn't fired until we open then close the overlap marker. If I find a conclusion to this solution I will update this post.
I have Google Map created with version of Google Maps api v3. It's "standard" Google Map, filled with markers and clusters. Every marker and cluster have it's own InfoWindow, showed when end user click on it.
What I need is that when map is loaded, to open all of InfoWindows of all markers and clusters showed on map.
Right now, they are showed only when I click on them:
google.maps.event.addListener(markerGreenCluster, 'clusterclick', function(markerGreenCluster) {
var content = '';
var info = new google.maps.MVCObject;
info.set('position', markerGreenCluster.center_);
var infowindow = new google.maps.InfoWindow();
aIWgreen.push(infowindow);
var center = markerGreenCluster.getCenter();
var size = markerGreenCluster.getSize();
var markers = markerGreenCluster.getMarkers();
// more code goes here...
})
I noticed that problem is in cluster definition, and method markerGreenCluster.getSize(); It returns number of grupped markers, and it can return it after whole map is loaded, or something like that.
Can you help me how can I achieve that all of InfoWindows are open (showed) when map is loaded?
the infowindows only open on click because you're only creating them on the click event listener. Move the code creating the infowindows out of the click handler, into a window load event handler instead.
To do this, what I do is create a InfoWindows object and stored it into the marker. Something like this
function CreateMarker(Lat, Lng, Title, Content) {
var aInfoWin = new google.maps.InfoWindow({
content: Content,
position: new google.maps.LatLng(Lat,Lng)
});
var aMarker = new StyledMarker({
title: Title,
position: new google.maps.LatLng(Lat,Lng),
MyInfoWin: aInfoWin
});
aMarker.MyInfoWin.open();
}
You can access to the Marker InfoWindows where you like (events, code,.....) like the other properties.
Code non tested, only to get the idea
Regards
I'm implementing an application in which I have to show google map with circle at the center of the map. I'm able draw a circle on map but after few seconds I've to update the circle's radius. I want to use same instance of map rather than creating new one.
When i create the new circle its overlapping on older circle. I want to remove previously added circle and show new one.
While checking the api I got this method from Circle class which will hide the circle.
myCity.setOptions({visible:false});
but the problem is I don't have access to older circle instance.
Is there any way which will allow me to get maps markers and infoboxes assigned to that map and remove them?
Below is method which will get called interval of few seconds
function mapByCoordinates()
{
var lat=document.getElementById("latValue").value;
var lng=document.getElementById("lngValue").value;
var accuracy = document.getElementById("zoomValue").value;
var zoomVal=getZoomBasedOnAccuracy(accuracy);
var zm = parseInt(zoomVal);
var tempRadius = getRadiusBasedOnAccuracy(accuracy);
var amstr = new google.maps.LatLng(lat,lng);
var mapProp = {
center:amstr,
zoom:zm,
mapTypeId:google.maps.MapTypeId.HYBRID
};
map.setOptions(mapProp);
myCity.setOptions({visible:false});
infobox.close();
myCity = new google.maps.Circle({
center:amstr,
radius:tempRadius
});
marker=new google.maps.Marker({
position:amstr,
});
myCity.setMap(map);
myCity1.setMap(map1);
infobox = new google.maps.InfoWindow({
content:"Welcome to google map",
disableAutoPan:true
});
infobox.open(map,marker);
map.panTo(amstr);
map.setZoom(19);
}
Thanks
We can make the already drawn circle invisible on google maps by using following method
circle.setOptions({visible:false});
and can null the instance of that map.
Try circle.setRadius(radiusvalue)
I'm adding a collection of markers to a map in the v3 api. Everything works fine, but when I drag the map (enough so the markers are off the screen), zoom in, and then drag the map back to the original center, the marker images are offset by roughly the distance I dragged the map. They're still arranged in the correct shape, just moved.
A few other notes:
The marker images don't move if I drag and don't zoom in, or if I drag and zoom out.
If I just zoom in on the map until the markers are off the screen, the same thing happens
Polylines do not move (i.e., they retain their correct position no matter what)
In Firefox, marker images move (or rather, stay in their same pixel position and don't move with the coordinates point on the map) whenever i zoom in on a point other than map center
Here's the code I'm using the add markers:
var bounds = new google.maps.LatLngBounds;
for (i=0, len=points.length; i<len; i++) {
var myPoint = points[i];
var myLatLng = new google.maps.LatLng(myPoint.lat, myPoint.lng);
var markerImage = new google.maps.MarkerImage(
'http://www.mysite.com/images/marker.png',
new google.maps.Size(21,21), // size
new google.maps.Point(0,0), // origin
new google.maps.Point(10,10), // anchor
new google.maps.Size(21,21) // scale
);
var markerOptions = {};
markerOptions.map = this.map;
markerOptions.position = myLatLng;
markerOptions.icon = markerImage;
markerOptions.draggable = true;
this.markers[i] = new google.maps.Marker(markerOptions);
bounds.extend(myLatLng);
}
It's like the pane for the markers is disconnected from the pane for the map and polylines. Is there something I can do differently when adding the markers so the images retain their correct display position? This wasn't a problem in V2.
I'm fired.
Just after the block of code in the example, I had
if (init) {
//a bunch of stuff, PLUS
this.map.fitBounds(bounds);
} else {
//a bunch of other stuff, BUT NO fitBounds
}
so, adding
this.map.fitBounds(bounds);
in both logic paths fixed the problem