I have a Drupal ExtendedGmap View. View results show as markers on the map. Marker type is determined by a custom field (NOT a field on the content type, but rather a PHP field calculated from the View) so the first view result marker is set to 'orange' and all other row markers are set to 'green'. The problem I have is that I want my first (orange) marker to show above the others. I have found a way to change the first marker z-index value in THEME_preprocess_gmap_views_view_gmapextended function:
$vars['markers'][0]['opts']['zindex'] = '9999';
But this is not reflected on the map and the first marker is still buried (in fact the first marker ends up somewhere in the middle of the stack).
How do I get my first View row marker on top?
I tried the Javascript mentioned on this page but don't really understand it and it doesn't work for me.
Drupal.gmap.addHandler('gmap',
function (elem)
{
var obj = this;
obj.bind('preparemarker',
function (marker)
{
marker.opts.zIndexProcess =
function (marker,b)
{
return this.zindex ? this.zindex : -99999;
};
}
);
});
I am using Drupal 7 and Gmap 7.x-2.9
Found the problem. Googlemaps API V3 uses zIndex (capital 'I') instead of zindex. Changed that and works as expected - markers stack correctly.
Example code:
$vars['markers'][0]['opts']['zIndex'] = '9999';
Related
I am creating a graph where I want to show the markers of the series only when hovering. I already tried the solution as shown on this question (Highcharts markers on legend and hover ONLY), and it works perfectly to show the markers when I want to.
However, I have another graph in the same html page that needs to show the markers and when I applied the solution presented on that question on the graph that I want (first graph) and I zoom at the other graph (second graph) the series that are represented by dots does not zoom, they keep all the markers on the graph.
The option
Highcharts.Series.prototype.drawPoints = function() { };
is on line 37 of the jsfiddle https://jsfiddle.net/erifel/sx3dcmny/
You should be able to use marker.enabled: false and series.states.hover.lineWidthPlus: 0 for achieving your chart without reseting drawPoints function. This will give you a possibility to redraw your markers when zooming on you chart.
If you want to show hidden markers in your legend, you can wrap renderItem function in your Legend prototype:
H.wrap(H.Legend.prototype,'renderItem',function(proceed,item){
var enabled = item.options.marker.enabled;
item.options.marker.enabled = true;
proceed.apply(this, Array.prototype.slice.call(arguments, 1));
item.options.marker.enabled = enabled;
});
Here you can see an example how it can work: https://jsfiddle.net/sx3dcmny/12/
I am using google maps api 3.9 .In app user can add marker or delete marker.when user click on map an Infowindow will be displayed.in which user can enter name,lat,long and click the save image as follows:
google.maps.event.addListener(map, 'click', function(event) {
point = new google.maps.Marker({
position: event.latLng
, map: map
, icon: 'resource/image/mapIcons/point.png'
, id: id
, type:"point"
});
type = point.type;
newPoint = true;
existingPoint = false;
markerObj = this;
inputInfowindow.setContent("<table style='width:92%;' id='inputTable'>" +
"<tr> <td>point</td> </tr>" +
"<tr> <td><input class='infoInput' type='text' id='name' placeholder='name'/> </td> </tr>" +
"<tr> <td><input class='infoInput'type='text' id='lat' placeholder='latitude'/></td> </tr>" +
"<tr> <td><input class='infoInput'type='text' id='lon' placeholder='longitude'/></td> </tr>" +
"<tr><td><input type='image' src='resource/image/mapIcons/save.png' onclick='save()' class='saveImage' alt='save'/> </td></tr>");
event1 = event.latLng;
currentMarker = point;
inputInfowindow.open(map,point);
});
marker saved in DB.
when user cliclks on delete button follwing method ll be called:
function deleteMarker(id,rev) {
var marker = markerObj;
markerObj = undefined;
var x = confirm("are you sure to delete marker?");
if(x){
deleteLocations(id,rev);//removes marker details from DB
if(marker){
console.log(marker);
marker.setMap(null);
}
}
}
but at marker.setMap(null); marker is removed from map still its on map.I checked with console.log(marker); marker object coming properly,no errors on console.i went through lot of googling but no result.Please help about this.
From the documentation-
To remove an overlay from a map, call the overlay's setMap() method,
passing null. Note that calling this method does not delete the
overlay; it simply removes the overlay from the map. If instead you
wish to delete the overlay, you should remove it from the map, and
then set the overlay itself to null.
so after the marker.setMap(null) you should also write marker=null
Update1-
function deleteMarker(id,rev) {
var x = confirm("are you sure to delete marker?");
if(x)
{
deleteLocations(id,rev);//removes marker details from DB
if(markerObj)
{
console.log(markerObj);
markerObj.setMap(null);
markerObj=null;
}
}
}
Update 2-
Here is a simple demo that works. See the code and check where your code is wrong. Probably some variable scope issue exists in your code.
WORKING DEMO
marker.setMap(null) does not delete the object, it only hides it. To delete it do marker = null;
I had same problem. You should call these methods before markers[index].setMapp(null) :
map.setCenter(desMarker[index].getPosition());
desMarker[index].setPosition(null);
after these call:
markers[index].setMapp(null)
In the map click event you assign this to the markerObj. Though this refers to the map object and not the marker object.
Change it to
markerObj = point;
and it should work as expected.
I had a similar error, I'm not sure if my solution applies to your case, nevertheless.. I set up my code so that when my page loaded the map would be filled up with any markers from coordinates denoted in my database. Then I allowed the user to add more points to the database and then added a marker to the user's selected location on the map.
What I didn't realize is that any time a coordinate was changed or created in my database my code was re-adding markers to all the coordinates on my map. So anytime I created a point I was both manually adding a marker to the coordinates and my database was adding a marker to the coordinates. So when I thought my code was broken what was really happening is I was deleting one of two points in the same location.
So I don't know exactly how you're pulling in coordinates and markers from you database but it's worth looking into.
For future people, using "marker.setVisible(false);" works for me
marker.setVisible(false);//this line works
marker.setMap(null);
marker.setPosition(null);
marker = null;
Dear all. I'm pretty new in coding with location, so be nice.
I have a list of location (lat & lng), that could be really anywhere (ie : all in the same city ; one in bangladesh and one in paris...).
When initializing google map, I would like to center on the barycentre on these location.
So this is my first question : How to calculate a barycentre with location object
Then, I would also like the initial map do display all the location (markers). So this is a problem of zoom, and is my second question : How to calculate the zoom in a google map so that all the markers on the map are displayed
I hope I've been clear. Also, take note that I was meaning barycentre with all points coefed to 1.
Best regards.
To zoom to include a set of results:
var locations = new google.maps.LatLngBounds();
...
function zoomToViewports(locations) {
var bounds = new google.maps.LatLngBounds();
for (var i in locations) {
bounds.union(locations[i].geometry.viewport);
}
map.fitBounds(bounds);
}
Having done that, the barycentre is in the middle of the screen, so if you actually need it's value it's easily calculated [(max(lat)-min(lat)/2,(max(lng)-min(lng)/2]
HTH?
You are welcome to lift the JS from this page on my website, which does what you describe
I want to have draggable markers (already done), but I need to be able to turn off draggability in certain conditions.
Marker is created like this;
var Marker = new GMarker(center,{draggable:true});
...which works fine. But I can't figure out how to make it undraggable.
like this
var myMarker = new GMarker(center,{draggable:true});
myMarker.disableDragging();
http://code.google.com/apis/maps/documentation/javascript/v2/reference.html#GMarker.disableDragging
There are about 100 markers on a google map plus there is one special marker that needs to be visible. Currently, the markers around it hide it totally or partially when the map is zoomed out. I need that marker to be fully visible and I think keeping it on top of all other markers should do the trick. But I cannot find a way to modify its stacking order (z-index).
This is for Google Maps API 2.
For Google Maps API 3 use the setZIndex(zIndex:number) of the marker.
See:
http://code.google.com/apis/maps/documentation/javascript/reference.html#Marker
Use the zIndexProcess option in GMarkerOptions when you create the marker that you want on top. For example:
var pt = new GLatLng(42.2659, -83.74861);
var marker = new GMarker(pt, {zIndexProcess: function() { return 9999; }});
map.addOverlay(marker);
I believe the default is to have a z-index that is the latitude of the point of the marker, so this should be fairly safe at bringing a single marker to the front. Further, this was just a simple example; you can set the z-index of all your markers in whatever simple or complex way you want. Another example is to have two functions: one for special markers and one for the rest.
var pt1 = new GLatLng(42.2659, -83.74861);
var pt2 = new GLatLng(42.3000, -83.74000);
var marker1 = new GMarker(pt1, {zIndexProcess: specialMarker});
var marker2 = new GMarker(pt2, {zIndexProcess: normalMarker});
map.addOverlay(marker1);
map.addOverlay(marker2);
function specialMarker() {
return 9999;
}
function normalMarker() {
return Math.floor(Math.random()*1000);
}
Adding on to jhanifen's answer, if you want to get your one special marker to be on top of all the rest, set it's zIndex to google.maps.Marker.MAX_ZINDEX + 1. This will make sure that it is on top of any marker on the map.