Simply put, I am trying to dynamically create a marker and corresponding label for each property of in the loop. The label will contain the time-stamp.
However, I am fairly stuck on figuring out how to get the on-click function to remain bound to it's respective marker. The infowindow variable as well.
I have tried using a counter and creating an array of variables to reference each function. I have also tried eval and creating new variables within the global window
window["foo" + counter]
unsuccessfully. With all variations of this that I have tried the code has broken or resulted in all triggers/infowindows being bound to the same property.
Any help or direction would be greatly appreciated. I think I am just missing some depth on understanding variable/object scope. This base code results in all markers appearing and the final label (since the previous ones are overwritten) as depicted below.
variables:
prop = string representing long,lat coordinates
obj[prop] = An ISOformat timestamp
Rest of the code taken from marker Labels Google Maps API
for (var prop in obj) {
// skip loop if the property is from prototype
if(!obj.hasOwnProperty(prop)) continue;
var templocs = prop.split(",").map(Number);
console.log(templocs[0]);
var temppos = new google.maps.LatLng(templocs[0], templocs[1]);
var mark = new google.maps.Marker({
position:temppos,
map: map,
animation:google.maps.Animation.BOUNCE,
});
var infowindow = new google.maps.InfoWindow({
content: "date taken: " + obj[prop],
maxWidth: 200
});
mark.addListener('click', function() {
infowindow.open(map, mark);
});
}
var cnt = 0;
var infowindow = [];
var mark = [];
var bounds = new google.maps.LatLngBounds();
for (var prop in obj) {
// skip loop if the property is from prototype
if(!obj.hasOwnProperty(prop)) continue;
var templocs = prop.split(",").map(Number);
console.log(templocs[0]);
var temppos = new google.maps.LatLng(templocs[0], templocs[1]);
infowindow[cnt] = new google.maps.InfoWindow({
content: "date taken: " + obj[prop],
maxWidth: 200
});
mark[cnt] = new google.maps.Marker({
position: temppos,
map: map,
animation:google.maps.Animation.BOUNCE,
});
/* mark[cnt].addListener('click', function() {
infowindow[cnt].open(map, mark);
}); */
google.maps.event.addListener(mark[cnt], 'click', (function(markerrr, cnt) {
return function() {
infowindow[cnt].open(map, mark[cnt]);
}
})(mark[cnt], cnt));
bounds.extend(mark[cnt].getPosition());
cnt++;
}
Fixed. This post is a duplicate of this one
Issue had to do with closure.
Related
I'm getting back an array of JavaScript objects from a database. I'm looping through that array and creating objects to be displayed on the screen. I'm trying to use .addEventListener() to each object but I just realized that addEventListener() only works for DOM objects.
How could I add an event listener to each JavaScript object?
Here is my code:
var objects = JSON.parse(data.responseText);
var i;
var objectLn = objects.length;
for (i = 0; i < objectLn; i++) {
//Puts each object into a variable
var eachObject = objects[i];
//Establishes pin position
var pinPos = {
lat: parseFloat(eachObject.lat),
lng: parseFloat(eachObject.lng)
};
//Creates new icon for pin
var icon = {
url: "path/to/img",
scaledSize: new google.maps.Size(60, 60),
origin: null,
anchor: null
};
//Creates a new pin from pulled information
var pin = new google.maps.Marker({
position: pinPos,
map: map,
icon: icon
});
//Alerts each object on click
pin.addListener('click', function() {
alert(JSON.stringify(eachObject));
map.panTo(pinPos);
map.setCenter(pinPos);
});
}
addListener is adding a 'click' listener to each pin that is dropped, so that's good. The problem is that it's supposed to alert each object, but it's only alerting the last object I retrieve from the database on every pin I click.
try doing your loopage like so..
for (i = 0; i < objectLn; i++) {
(function(eachObject){
// copy the loop contents here. eachObject is already defined.
})(objects[i]);
}
When I push a marker to the array it plots the marker correctly and adds a title to the array too.
I know this works because when I console.log the console.log(markersArray); it returns the following. the title of the marker is next door.
The below is my marker click that opens up the info window, but when I console.log out the data which is called mll it doesn't have the title inside it.
google.maps.event.addListener(marker, 'click', function(mll) {
console.log(mll);
var html= "<div style='color:#000;background-color:#fff;padding:5px;width:150px;'><p>"+mll+"</p></div>";
iw = new google.maps.InfoWindow({content:html});
iw.open(map,marker);
});
How would I be able to get the click function to pull in the title when the array has it and has pushed it successfully?
I remember doing something similar before. In my case, I used infoWindows with circle markers. Essentially, I had both in separate arrays. When I made the circle marker, I gave it a unique value, called place, which was basically it's count (the value of the n-th circle created, was n). On the event listener, I called the infoWindow from the other array based on the position of the current circle.
You can make an array var titles = []; to hold titles.
Each time you make a new marker, increment a var count = 0;, keeping track of how many markers you have.
In your marker options, add place: count. When you need a specific title, you can call titles[marker.place];
var infos = [];
var count = 0;
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var lastWindow;
count++;
var populationOptions = {
//leaving out defaults
place: count
};
var circle = new google.maps.Circle(populationOptions);
lastCircle = circle;
var contentString = 'just a string...';
var infowindow = new google.maps.InfoWindow({
content: contentString,
position: new google.maps.LatLng(data.lon, data.lad)
});
infos.push(infowindow);
google.maps.event.addListener(circle, 'mouseover', function() {
if(lastWindow){
lastWindow.close();
}
infos[circle.place].open(map);
lastWindow = infos[circle.place];
});
I've got a 3 pane google map integration in our VB.net software. For the most part it works brilliantly. Today I'm trying to get these 3 seperate objects to paint different polygons depending on the lat/lngs they're sent for each day.
First map control works all of the time. 2nd and 3rd however are being troublesome. I've attempted to screenshot what's going on.
As you can see, the polys are being drawn, but for some reason an entirely new map is being drawn on top of my original. Obviously this isn't right. I've got code all over the place too:
Here's the JS initialize that is called upon DocumentComplete firing:
function Initialize(zoomLevel,lat,lng,type, bCanEdit, bCanDrag){
//Get the type of map to start.
//Need to convert the GoogleMapType enum
//to an actual Google Map Type
var MapType;
switch (type)
{
case 1:
MapType = google.maps.MapTypeId.ROADMAP;
break;
case 2:
MapType = google.maps.MapTypeId.TERRAIN;
break;
case 3:
MapType = google.maps.MapTypeId.HYBRID;
break;
case 4:
MapType = google.maps.MapTypeId.SATELLITE;
break;
default:
MapType = google.maps.MapTypeId.ROADMAP;
};
//Create an instance of the map with the lat, lng, zoom, and
//type passed in
myLatlng = new google.maps.LatLng(lat,lng);
var myOptions = {zoom: zoomLevel,center: myLatlng,mapTypeId: MapType};
var MarkerSize = new google.maps.Size(48,48);
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
google.maps.event.addListener(map, 'click', Map_Click);
google.maps.event.addListener(map, 'mousemove', Map_MouseMove);
google.maps.event.addListener(map, 'idle',Map_Idle);
overlayLayer = new Array();
overlayCount = 0;
driverRouteLayers = new Array();
driverRouteCount = 0;
canEdit = bCanEdit;
canDrag = bCanDrag;
}
The VB.net that invokes the script to draw the overlay areas:
Public Sub DrawAreaOverlays(ByVal area As DeliveryArea)
Dim gc As New GComArray()
For Each p As DeliveryAreaPoint In area.Points
Dim ll As New GLatLong(p.Latitude, p.Longitude)
gc.Add(ll)
Next
WebBrowser1.Document.InvokeScript("DrawAreaOverlay", {gc, Utility.Pens.GetHexColor(area.Colour)})
End Sub
And the initial DocumentComplete hook-in in vb.net:
Private Sub WebBrowser1_DocumentCompleted(ByVal sender As Object, ByVal e As System.Windows.Forms.WebBrowserDocumentCompletedEventArgs)
'Initialize the google map with the initial settings.
'The Initialize script function takes four parameters.
'zoom, lat, lng, maptype. Call the script passing the
'parameters in.
WebBrowser1.Document.InvokeScript("Initialize", New Object() {InitialZoom, InitialLatitude, InitialLongitude, CInt(InitialMapType),
allowEditing, allowDragging})
RaiseEvent PopulateInitialRoutes()
End Sub
These are the only methods that are called to start with, the rest are just hooks into the javascript methods to display various things, but nothing is called (like this) prior to this point. And on this specific form, I'm only displaying, not allowing end-users to manipulate the data in any way.
The DrawAreaOverlay method (JS) is responsible for the poly drawing (please excuse the state of the code, I've been ripping it apart trying to figure this out!):
function DrawAreaOverlay(area, col)
{
if(area.Count <= 0)
{
CreateNewArea(0, 0);
return;
}
var coordsString = "";
var areaCoords = [];
overlayLayer[overlayCount] = new Array();
for(var j=0; j<area.Count; j++)
{
areaCoords.push(new google.maps.LatLng(area.Item(j).lat, area.Item(j).lng));
}
var poly = new google.maps.Polygon({
paths: areaCoords,
strokeColor: '#'+col,
strokOpacity: 0.35,
strokeWeight: 2,
fillColor: '#'+col,
fillOpacity: 0.25,
geodesic: false,
editable: canEdit,
draggable: canDrag,
map: map
});
poly.getPaths().forEach(function(path, index){
google.maps.event.addListener(path, 'set_at', function(){
var arrayOfPoints = new Array();
arrayOfPoints = poly.getPath();
coordsString = "";
for(var i=0; i<arrayOfPoints.length; i++)
{
coordsString += poly.getPath().getAt(i).lat() + ", " + poly.getPath().getAt(i).lng() + "|";
}
window.external.AreaPointMoved(coordsString.substring(0, coordsString.length -1));
});
});
// INSERTION OF NEW VERTICES ALONG THE POLYGON EDGES //
poly.getPaths().forEach(function(path, index){
google.maps.event.addListener(path, 'insert_at', function(){
var arrayOfPoints = new Array();
arrayOfPoints = poly.getPath();
coordsString = "";
for(var i=0; i<arrayOfPoints.length; i++)
{
coordsString += poly.getPath().getAt(i).lat() + ", " + poly.getPath().getAt(i).lng() + "|";
}
window.external.AreaPointMoved(coordsString.substring(0, coordsString.length -1));
});
});
debugger;
//if(map == null)
//{
// makeMeANotNullMap(zoomLevel, latitude, longitude);
// overlayLayer[overlayCount] = new Array();
//}
poly.setMap(map);
overlayLayer[overlayCount].push(poly);
overlayCount++;
//alert("I'll work now, but why?");
//window.external.DoNothing();
}
Now the REALLY weird part. If I uncomment the alert box in JS (the: I'll work now, but why? alert) each map renders wonderfully. So something clearly happens to the map once the alert box has been dismissed. It's this missing link I'm after. But I can't fathom it.
Without the alert box, interestingly, the 2nd and 3rd initialisations of the map controls, map is sometimes null. I know this, because I've setup VS to debug the script. So you can drag each one (vigorously) and get the attached image above outcome, where the poly has drawn, but you can't see it.
Any help is greatly appreciated. I don't have a clue why this is happening.
I have a Google Map with a bunch of markers.
I add markers to the map one-by-one and need to remove individual markers one-by-one too when required, using individual IDs.
Currently I have some horrible, verbose code, involving a global array of markers, an ID added as metadata to each marker, and a clunky method for looking up a marker's position within the array, as follows:
var markersArray = [];
function getPositionById(markerId, arr) {
for (var i = 0; i < arr.length; i++) {
if (arr[i].metadata.id === markerId) {
return i;
}
}
return null;
}
function removeMarker(markerId) {
var marker_position = getPositionById(markerId, markersArray);
if (marker_position !== null) {
markersArray[marker_position].setMap(null);
markersArray.splice(marker_position,1);
}
}
function setMarker(position, markerId) {
removeMarker(markerId);
var temp_marker = new google.maps.Marker({
position: position
});
temp_marker.setMap(map);
temp_marker.metadata = { id: markerId };
markersArray.push(temp_marker);
}
Could anyone suggest an even slightly more elegant way to do it?
Given that to remove a marker from the Map you need to use setMap(null), means that you need to have a reference to that marker.
The way you presented in your question doesn't look as horrible as you think, but another way to do it is to use a map instead of an array (not sure if map is the best term to use here since we are already working with the Google maps Map), nonetheless, using a map would rid you from the getPositionById() function, off course this assumes that all your markerIds are unique.
Your code would look something like this.
var markers = {};
function removeMarker(markerId) {
if(markers[markerId]){
markers[markerId].setMap(null);
delete markers[markerId];
}
}
function setMarker(position, markerId) {
removeMarker(markerId);
var temp_marker = new google.maps.Marker({
position: position
});
temp_marker.setMap(map);
temp_marker.metadata = { id: markerId };
markers[markerId] = temp_marker;
}
I'm trying to add markers to a google maps by iterating through a list and retrieving some information. I'm using the prototype library. The code is the following:
var point = new Array();
var myMarkerOptions = new Array();
var marker = new Array();
recommendedList.each(function(item){
point[item.location.ID] = new google.maps.LatLng(item.location.lat, item.location.lng);
myMarkerOptions[item.location.ID] = {
position: point[item.location.ID],
map: map
};
marker[item.location.ID] = new google.maps.Marker(myMarkerOption[item.location.ID]);
});
where the recommendedList is a JSON response of the form:
[
{"artist":"artist1","location":{"lat":"50.952226","lng":"5.34832","ID":28}},
{"artist":"artist2","location":{"lat":"52.362287","lng":"4.883965","ID":32}},
...
]
However, this is not working.
I know that the problem is not about the JSON or the google map, because I tried a simpler version with the following code and it worked:
var myLatlng = new google.maps.LatLng(recommendedList[0].location.lat,recommendedList[0].location.lng);
var marker = new google.maps.Marker({
position: myLatlng,
map: map
});
So the problem must be in the iteration and the hash maps.
Anyone can see the problem? Thanks!
Simple enough to test without the .each
for (var i=0, item; item = recommendedList[i]; i++) {
point[item.location.ID] = new google.maps.LatLng(item.location.lat, item.location.lng);
myMarkerOptions[item.location.ID] = {
position: point[item.location.ID],
map: map
};
marker[item.location.ID] = new google.maps.Marker(myMarkerOption[item.location.ID]);
}
You can also simplify this quite a lot, unless you "need" those other arrays:
for (var i=0, item; item = recommendedList[i]; i++) {
marker[item.location.ID] = new google.maps.Marker({
new google.maps.LatLng(item.location.lat, item.location.lng),
map
});
}
I think it could be the array accessors you're using. What are you doing the point, myMarkerOptions and marker arrays once you're done with them?
Can you try declaring them as
var point = {};
var myMarkerOptions = {};
var marker = {};
That'll let you refer to them as point[item.location.ID] (etc). I think with the item.ID property being a number, JS is trying to set that numeric index of the array, rather than creating a new property in your hash.
Prototype each iterator doesn't support JSON or object data type.