I want to push a custom var to dynamically loaded Google Maps markers (with live user positions) {via javascript}. In this case, I want to push a UNIX timestamp into the marker, so that way I can keep track of marker timing. After a set interval, JS scans for markers timestamps that reach an expired time period -> then remove them.
I wanted to see if any one else played with this similar idea.
The good thing about the Google Maps API using Javascript is that the objects you create function just as any other object or variable you would usually find in Javascript.
This means that you can easily push a new var into the marker. I have done this myself a couple of times and it works like a charm :)
Simply go :
var marker = new google.maps.Marker();
marker.timestamp = WHATEVER_YOU_WANT;
Related
In Bing Maps v7 I was able to add pushpins to an entityCollection and then loop through that collection later in the code to set options or whatever. Now, I am having trouble getting pins from the v8 layers.
Here is what I used to do in v7 after I had already added the pin to the entityCollection:
for (var i = 0; i < entityCollection.getLength() ; i++) {
var pin = entityCollection.get(i);
pin.setOptions({ visible: true });
}
I have changed the object entityCollection to a layer for v8 and I am also looping through the layer while i < entityCollection.data.length
Now, in Bing Maps v8, I'm having trouble getting the pin object from the layer that I have already added it to. The code above throws an error on the setOptions line and I have also tried getting the pin with:
entityCollection.data[i]
instead of
entityCollection.get(i)
But that doesn't work either. I'm afraid my question is too generic, because I can't find anything that actually answers my question. I have a work around, but that causes failures later when I want to hide all the pins with certain attributes. Thanks in advance!
Bing Maps v8 has done away with the entityCollection - though they say it's still sort of supported, you obviously don't want to be using deprecated things any more.
Anywhere you have an entityCollection, replace it with a Layer (Microsoft.Maps.Layer). Layers expose the getPrimitives() method which will provide you with an array of the contents.
var map = new Microsoft.Maps.Map(..., ...);
var layer = new Microsoft.Maps.Layer();
// Add layer data...
layer.add(new Microsoft.Maps.Pushpin(...));
// Add layer to map
map.layers.insert(layer);
// Then you can iterate
var layerItems = layer.getPrimitives();
var len = layerItems.length;
for(var i = 0; i < len; i++){
var pin = layerItems[i];
// Do something with your pin
pin.setOptions({visible: false});
}
Note that if you're doing mass updates to the entire contents of the layer, such as showing or hiding every pin in the layer, you can do that directly on the layer. This will save you (the browser) a chunk of work setting each pin individually.
layer.setVisible(true);
Yes, in V8 layers have a getPrimitives function which returns an array containing all the shapes. You can then loop through these shapes like you would any other array.
I would like to show some specific data when user mouseover the polyline in google map. I get LatLng object in in mouseover event. I would like to save custom field (index to another array with data to show) to the LatLng object, so I don't need to scan another collection.
I am not expert on Javascript. Can I add a custom property to LatLng or can I inherit/extend myLatLng object? What is the best approach?
google.maps.event.addListener(polyline, 'mouseover', function (event) {
var indexOfPointInPolyline = SomeFunc(event);//I don't know how to do this properly
});
Basically a LatLng is an object, you can assign any property you want to via:
obj.myProperty='myValue'
for the given code it would be like:
event.latLng.someProperty='someValue';
But: this will not work because:
the mouseover-event will always pass a new LatLng-instance
it's also useless to implement other solutions based on the coordinates. When you log the returned values you'll see that they are always different(the accuracy will be up to centimeters or even millimeters ), it's nearly impossible for a user to touch a polyline repeatedly at the exact same point.
I am displaying two different leaflet maps in the same page. After a certain event. I want a Polyline to appear on both of them. I would like to avoid, if possible, to create a copy and keep two different variables.
I am trying yo use the following:
var line_coordinates = [[1,2],[3,4]];
var my_polyline = L.polyline(line_coordinates);
my_polyline.addTo(map1);
my_polyline.addTo(map2);
However, if I run the above code, the Polyline will be displayed only on the map2.
Afterwords, I will need to change again its coordinates to some new_line_coordinates, and I will run the following:
my_polyline.setLatLngs(new_line_coordinates);
my_polyline.redraw();
The polyline should now appear updated to the new coordinates. However, again, it appears only on map2.
What am I doing wrong? Is it possible to achieve what I am trying to do?
As geocodezip mentioned in a comment, adding a polyline to a map sets the polyline object's this._map instance variable. Therefore, there is no way to have the object rendered on both maps with the way in which it is currently implemented.
You can view the relevant source code here.
You can't add the same layer to multiple Leaflet maps. But I had a similar problem using a more complex GeoJSON layergroup and ultimately solved it by getting the GeoJSON object from the layer using toGeoJSON() and using it to create a new layer for the second map. For a simple polyline, you could use getLatLngs(). So:
var line_coordinates = [[1,2],[3,4]];
var my_polyline = L.polyline(line_coordinates);
my_polyline.addTo(map1);
var new_polyline = L.polyline(line_coordinates);
new_polyline.addTo(map2);
should work, as would:
var line_coordinates = [[1,2],[3,4]];
var my_polyline = L.polyline(line_coordinates);
my_polyline.addTo(map1);
var my_polyline_latlngs = my_polyline.getLatLngs();
var new_polyline = L.polyline(my_polyline_latlngs);
new_polyline.addTo(map2);
I was looking for a solution but all are how to draw polylines from the json file etc. Main question is how to get the functionality to create a new polyline and store old in array each time when click on button "New Polyline"? Second how to leave polylines and draw new on map after click "New Polyline" button and clean and restore only when click right button? May better way is to store Polylines outside the class, or make a new separately class for this? May you have to approach this differently?
Bad demo but highlight what I mean I hope: jsfiddle
Array was moved to global scope but can't setMap on last polyline works only via clearOverlays function. Now complications arise on other buttons. I create additional global object newPoly but don't know whether is good idea may better get object from myPolyline? In other side restore case can't set on map stored in array polylines.
To save the polylines you've made, create another global variable to store the polylines and push them in, and at the same time, setMap(null) on the last polyline in the array. You can't store the polylines you've made in the same object, since you're making a new one each time.
So move:
this.polyLines = [];
out of the class, and into the global scope, or into another class, its fine to leave the marker array in there, since that's local to that polyline instance.
this should also help - https://developers.google.com/maps/documentation/javascript/overlays#OverlaysOverview
I currently have a implementation where some markers coming from JSON list is shown, on a particular area, Now I want to filter these marker depending upon some criteria, I have done the filtering part, and got the filtered list. Now to render this markers on the map again, The current implementation loads the js with a key again, also creates the GMap2 object and draws the list of marker on the newly created map, which is really annoying. I want map to be there and only markers to be added and removed from the map.
Any help is appreciated
You can use addOverlay and removeOverlay to add/remove markers from an already displayed map. See the examples here: http://code.google.com/apis/maps/documentation/overlays.html#Markers
var latlng = new GLatLng(lat, lng);
map.addOverlay(new GMarker(latlng));
You can make drawMap() and drawMarkers() as two separate functions. And after map has been created redefine drawMap to empty function like this:
drawMap = function(){}; After that only drawMarkers() will be executed.
Hope this is what you need. If not, provide some code.