I was helped out by an SO member with the following code which allows me to use multiple markers from a PHP array and plot them on a map:
for (i = 0; i < locations.length; i++)
{
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][0], locations[i][1]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function()
{
infowindow.setContent(locations[i][2]);
infowindow.open(map, marker);
}
})(marker, i));
}
So that code is grabbing my array and putting my markers on the map and in the infowindow, printing out the customer name.
I quickly came across an issue however. If a customer share's the same lat/long (they're derived from postcode), only one of the customers appear - e.g. Customer1 at LN1 7HQ and Customer2 at LN1 7HQ, only customer 1 will appear in the info window.
A few solutions I found include clustering markers and offsetting them - but what I would like is the have 1 infowindow for each postcode and then list the customers located there in the window.
I haven't found a way to do it but would assume it will involve altering the For loop below and adding something like "If lat, long === lat, long, then locations[i][2] ++ ..." but I'm just about grasping PHP and javascript is still new to me.
Any help would be much appreciated.
One possible solution: track created markers using array
var markers = [];
with information about location indexes using following object:
function MarkerInfo(marker, idx) {
this.marker = marker;
this.locations = [idx];
}
There are two loops. The 1st loop build array of MarkerInfo with marker and list of indexes from locations array. The 2nd loop prepares content string for infowindow and creates listeners.
See example at jsbin.
Note: for the future changes: solution won't work properly if you change locations array with information about customers between those two loops.
Related
I have a Google Map object available on my window object like so:
var map = window.site.map.el;
That Map also also has a bunch of markers placed on it, I'd like to hide a Marker on that Map where the marker's place_id property is equal to "123" for example.
However I don't see a function I can call on the Map class that will return me an array of all markers placed on the map that I can then loop through and hide depending on the marker's place_id.
Google maps does not provide a way to get all Markers, you need to do it yourself
while adding marker to the map keep it in array
var myMarkers = [];
....
for(...) {
var marker = new google.maps.Marker({...});
myMarkers.push(marker);
}
Than you can hide any marker, just by setting map to null
myMarker[i].setMap(null);
Or bring it back
myMarker[i].setMap(map);
I created a prototype for a project I'm working on, in which the user should create various markers in a map, be able to remove them, calculate a route with the markers, and go back to manage the markers.
I used some code found here in geocodezip.com to calculate the route, and wrote some for the markers, etc.
My problem is that once the user calculates the route, no matter how he edits the markers, when clicking the button to calculate the route, the map only returns the route with the markers that were there on the first time he clicked the button. And the strangest thing is that I checked the coordinates that are being passed to the script that generates the route and the function is sending the markers as it should, but no matter the coordinates sent, it only works correctly on the first time.
Js Fiddle: https://jsfiddle.net/1kmg2u65/2/
The code is really really long so it's all in the Fiddle, but this is what it does:
1. User clicks on map, generate marker, marker goes to an array
2. If user deletes marker, it becomes null in array, to maintain the indexes
3. 'Clean' markers array receives all the markers in order, without the items that are null
4. A function is called with all the markers, this function creates the route
5. To manage the markers, a function reload the map just like it was in the start, but render all the markers that already are in the markers array
it works fine if you remove the conditional if (!window.tour) in Tour_startUp function definition.
So here is what I believe is going on.
In the function markMap() you are instantiating new markers that belong to the google map object.
for (var i = 0; i < markerElements.length; i++){ //Loop para gerar os marcadores
if (markerElements[i] != null){
marker = new google.maps.Marker({
position: markerElements[i].position,
map: map,
title: markerElements[i].title
});
}
}
This if fine, but you are not storing that constructed object anywhere. You need to be able to reference that marker to UN-associate it from the map.
At the end of the this for loop you need to add THAT mark to a global array so you can manage it later in the script.
EXAMPLE
// defined at the top of the script
var markerGlobal = [];
for (var i = 0; i < markerElements.length; i++){ //Loop para gerar os marcadores
if (markerElements[i] != null){
marker = new google.maps.Marker({
position: markerElements[i].position,
map: map,
title: markerElements[i].title
});
// push marker onto global array
markerGlobal.push(marker);
}
}
Now we can loop through the array and setMap to null
// un-reference marker from map
markerGlobal[2].setMap(null);
I see you tried to do this with the removeMarker() function, but it doesn't have the handles to the markers already added to the map.
Some Suggestions
If I was you, I would think about refactoring the code to have one multi dimensional object that holds all the markers, their row info, variables etc.
You could take it one step further and create a constructor function that handles the map and its associated markers. It would be most efficient.
Good luck.
Google Maps has a nice feature called Marker Clusterer which lets you to apply grid-based clustering to a collection of markers.
Marker Clusterer counts every marker as one, it sums up the number of markers in the grid. Differently, I want to assign a weight to every marker and sum up these weights in the cluster. Is it possible with Google Maps API? Do you know any other javascript library which provides a similar feature?
It's not as complicated as it seems.
The markerclusterer-library provides the option to override the calculator-function(this is the function that will build the cluster-icons).
Store the weight as a property of the markers, e.g.:
new google.maps.Marker({position:new google.maps.LatLng(1,2),weight:8});
The calculator-function may look like this:
var calc=function(markers, numStyles) {
var weight=0;
for(var i=0;i<markers.length;++i){
weight+=markers[i].weight;
}
return {
text: weight,
index: Math.min(String(weight).length, numStyles)
};
}
To apply this custom function:
initialize the clusterer without markers:
var markerCluster = new MarkerClusterer(map);
set the function
markerCluster.setCalculator(calc);
add the markers:
markerCluster.addMarkers(markers);
Demo: http://jsfiddle.net/doktormolle/H4EJu/
The pitfall: the calculator-function will have to iterate over all markers(by default it doesn't, it only calculates based on the length of the markers-array). This will affect the performance of the MarkerClusterer, especially when you have a lot of markers.
I have a script that adds markers one by one to a map
var marker = new google.maps.Marker({
position: new google.maps.LatLng(51,-117)
});
marker.setIcon(getIconFile(initialIconId));
markers.push(new Array(id,marker)); // id, marker
marker.setMap(map);
later on in the script when I press a custom button I want to be able to change the markers icons. So I grab the marker by the id from the markers array and call:
markers[markerIndex].setIcon(getIconFile(newIconId)); // which returns a string url of the icon
However I receive: TypeError: markers[markerId].setIcon is not a function
I print the markerId and it is valid, I also print the result of indexing the marker markers[markerId] and it returns a marker object. I have no other way to debug this I am lost!
Thanks
It seems like you're pushing an Array into the markers, instead of just one element.
Why not:
markers = []
markers.push(marker)
markers[markerIndex].setIcon(getIconFile(newIconId));
or if you insist inserting an array:
markers.push(new Array(id,marker));
markers[markerIndex][1].setIcon(getIconFile(newIconId));
I'm new to javascript and to programming itself, I'm trying to add markers in google maps api and load it's coords from mysql, I have everything done but now I got stuck into something, is it possible to create a number of variables based on the number of coords I have ? here is what I have:
function get_values(numero, array)
{
var i;
for(i=0;i<numero;i++)
{
//var i ( HERE: i want it to set variables based on i )= new google.maps.Marker({
position: array[2],
//map: map,
//title:"Hello World!"
});
}
}
It appears what you need to use is an array. This will allow you to store as many coordinates as you want and you'll be able to access them by index (number). For example, if you have 10 coordinates, they could be stored in an array like:
position[i] = array[2]
Your code looks, though, pretty broken, so I think you need more help getting started than what pointed questions on Stack Overflow will get you.
As Gordon says you need an array. If I understand correctly you want to create one marker for each iteration ?
Then I guess something like this would do the trick :
function get_values(numero, array)
{
var i;
var markers = new Array(numero); // create an array to store the markers
for(i=0;i<numero;i++)
{
markers[i] = new google.maps.Marker({
position: array[i],
map: map,
title: "Hello marker " + i // give a different title to each marker based on the number..
});
}
return markers;
}
This assumes that your get_values function takes the number of positions and an array of positions as parameters.