so, i'm working on a project that uses maps a lot, and a job was passed to me,
I have to make all this google maps Markers.
And put NUMBERS MANUALLY:
I asked if its possible to put the numbers by code, they say that is not, this need to be done this way.
So, i need to know, there is a way of changing this numbers by javascript or css or anything that could automatize this process.
It is indeed very possible - simply use the label attribute :
var marker = new google.maps.Marker({
position: new google.maps.LatLng(56.43, 10.3),
map: map,
label: '6' //<-- 6 will be the text inside the marker
});
demo with different numbers -> http://jsfiddle.net/ec2cr0jw/
But you can only add labels with one character, so your range of numbers is limited to 0..9. If you want more complex text or longer numbers in the markers, you can create the markers yourself from scratch, like in the answer to this question -> How to add values in google map v3
Related
I have created clusters using the following method:
marker_clusters = new MarkerClusterer(map, my_markers_arr, mcOptions);
and on request I would like to uncluster them. my_markers_arr contains all the markers objects created right before clustering them. So, how can I actually reverse this, or is it even possible?
I have also tried by giving a gridSize 0 but clusters still form.
I'm trying to load lot's of marker on a leaflet map
With this method :
L.marker([item.latitude, item.longitude]).addTo(this.map);
I loop for at least 100 markers and the map become really laggy after that.
Is there a way to optimize a map on which I want to display lot's of markers ?
I've used ngx-leaflet-markercluster with ngx-leaflet successfully to display 4000 markers. The plug-in uses a combination of cluster markers and regular markers that dynamically appear at certain zoom levels.
The plugin also spiderfy markers that have the same coordinates.
It works well with Angular 8.
ngx-leaflet-markercluster uses leaflet.markercluster and looks like this:
Clustering the markers is the best way to handle performance issues, in my opinion. Since that's no solution in your case, you can improve the performance by putting all the markers in one layer first and adding that single layer to your map, instead of adding all markers to the map individually.
You can compare the performance here:
Example adding grouped to map: http://jsfiddle.net/HarolddP/g12vj3mt/2/
Example adding individually to map: http://jsfiddle.net/HarolddP/euz7f6o2/
Suggested improvement:
var map = L.map('map').setView([51.5, -0.09], 3);
var markers = [];
for (var i=0; i<500; i++){
lat = ..; lng = ..;
marker = new L.marker([lat, lng]);
markers.push(marker);
}
markerGroup = L.layerGroup(markers);
markerGroup.addTo(map);
Another suggested solution is to add only the markers to the map that are in the boundary of your view.
As you can imagine, the performance also depends on what kind of markers you are using. Are they big in size? As you can see in the examples, the 500 standard leaflet markers are still performing quite well (at my machine).
I use the simple:
var ne = gMap.getBounds().getNorthEast(),sw = gMap.getBounds().getSouthWest();
to get the lat long of the boundaries of a map
It works fine when the map is like this:
But when the map is like this:
The North-East lat long comes as something like 63.821287740550275, -179.73632762500006. Which creates a problem because this lat long is almost same as the South-West resulting in no-area between them.
Is there a way to get the desired values, something like a maximum value if it crosses the line.
If you refer to this question: Get non-wrapping map bounds in Google Maps API V3
You'll see that as you have stated the map obviously wraps on the date line, so that as you zoom out you don't end up with blank areas at the edges and so that you scroll off the edge of china and hit America etc.
If you examine the answers you will see that you need to check for this wrap and go from there. And interesting question that I had never really considered!
I know a Marker in Google Maps API v3 is created like this:
var myMarker=new google.maps.LatLng(45.776374,12.043793);
var marker=new google.maps.Marker({
position:myMarker,
});
marker.setMap(map);
Corresponding to: https://maps.google.it/maps?q=45.776374,12.043793&ll=45.776486,12.045524&spn=0.008396,0.021136&num=1&t=v&z=16
Now let's suppose that I want to create the marker according to Country and postal code
Example: 31044,Italy (which is more or less the same point marked by the code above)
Corresponding to: https://maps.google.it/maps?q=31044,Italy&hl=it&sll=45.776486,12.045524&sspn=0.008396,0.021136&t=v&hnear=31044&z=12
My goal is to creare a marker without knowking the exact coordinates but knowing Country(Italy) and postal code (31044) (let's think that a user joins to my web site and I want to fullfil a map with the location of the city of every user. Of course for every new user who joins a new marker is added).
How should I do it? I tried to look throughout API reference but I didn't find out a way. As far as I see the only way is to create a LatLng object accoridng to coordinates but I saw websites that only need the postal code.
Thank you in advance for any hint
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;