Popup on Google Map icons

Sat Oct 25, 2014 3:38 pm

Hello Sebastian,

We are working on it, but this will take some time.

Sun Oct 26, 2014 11:39 pm

Hi Sebastian,

Please show us screen shots with UI that's you want to implement. And describe what is wrong.

Regards.

Tue Aug 18, 2015 1:54 pm

Any idea as to why my code can show the infowindow on load, but if I create a click event, I get an error "Uncaught TypeError: Cannot read property 'business_name' of undefined". Is it because coordsArray contents are not saved to memory and available during the session? How can I fix this and still call the data back?

var list_location = localStorage.getItem('County_Biz_List_Storage');
var obj = JSON.parse(list_location);
var coordsArray = obj;
var marker;
//var image = 'files/views/assets/image/Map-Marker-Bubble-Azure-icon.png';
var image = 'http://chart.apis.google.com/chart?ch...';
var map = Appery("Gmap").options.mapElement.gmap('get', 'map');
for (var i = 0, j = coordsArray.length; i < j; i++) {

var marker = new google.maps.Marker({
position: new google.maps.LatLng( coordsArray.lat, coordsArray.lng ),
map: map,
title: coordsArray.business_name,
});

var infowindow = new google.maps.InfoWindow({
content: ('' + coordsArray.business_name + '
' + coordsArray.hours_season + '
' + coordsArray.combinedAddress ),
position: new google.maps.LatLng( coordsArray.lat, coordsArray.lng ),
open: (map, marker),
//map: map,
maxWidth: 200
});

alert(coordsArray);
//Add event handler and open infoWindow
google.maps.event.addListener(marker, 'click', function() {
//Set content for infowindow.
infowindow.setContent('' + coordsArray.business_name + '
' + coordsArray.hours_season + '
' + coordsArray[i].combinedAddress );
//Open infowindow.
infowindow.open(map, marker);

Code: Select all

});

}

Tue Sep 01, 2015 5:00 am

Hi Blair,

You access "coordsArray" inside event handler. In this event handler "i" does not stores correct value.

Details: http://prntscr.com/8b6rw2/direct

You need to wrap event handler with some function and pass there needed index or "i".

Example of code:

precode

var list_location = localStorage.getItem('County_Biz_List_Storage');
var obj = JSON.parse(list_location);
var coordsArray = obj;
var marker;
//var image = 'files/views/assets/image/Map-Marker-Bubble-Azure-icon.png';
var image = 'http://chart.apis.google.com/chart?ch...';
var map = Appery("Gmap").options.mapElement.gmap('get', 'map');
for (var i = 0, j = coordsArray.length; i < j; i++) {

Code: Select all

 var marker = new google&#46;maps&#46;Marker({ 
     position: new google&#46;maps&#46;LatLng(coordsArray[i]&#46;lat, coordsArray[i]&#46;lng), 
     map: map, 
     title: coordsArray[i]&#46;business_name, 
 }); 

 var infowindow = new google&#46;maps&#46;InfoWindow({ 
     content: ('' + coordsArray[i]&#46;business_name + ' 
               ' + coordsArray[i]&#46;hours_season + ' 
               ' + coordsArray[i]&#46;combinedAddress), 
               position: new google&#46;maps&#46;LatLng(coordsArray[i]&#46;lat, coordsArray[i]&#46;lng), 
     open: (map, marker), 
     &#47;&#47;map: map,  
     maxWidth: 200 
 }); 

 alert(coordsArray); 
 &#47;&#47;Add event handler and open infoWindow  

 var AddClickEventHandler = function(index, coordsArray, map, marker){ 

     google&#46;maps&#46;event&#46;addListener(marker, 'click', function() { 
         &#47;&#47;Set content for infowindow&#46;  
         infowindow&#46;setContent('' + coordsArray[index]&#46;business_name + ' 
                               ' + coordsArray[index]&#46;hours_season + ' 
                               ' + coordsArray[index]&#46;combinedAddress); 
                               &#47;&#47;Open infowindow&#46;  
                               infowindow&#46;open(map, marker); 

     }); 

 }; 

 AddClickEventHandler(i, coordsArray, map, marker);

}

/code/pre

Regards.

Tue Sep 01, 2015 1:28 pm

Hi Yurii!

Thanks for the code snippet...but mine works better, lol. Yours has an error regarding the infowindow.

Uncaught TypeError: infowindow.open is not a function

It also does exactly what mine does - it just adds more markers. It does not remove the old ones on an update of the array.

Your code also had several syntax errors I had to fix before I could even get the project to load. Why the differences here? What version of Javascript should my project be using? I'm using the most current libraries.

[Update: I can see from the added Alert that on each call of the service, the objects in the array change. It did that before as well, the change visible in the list output below my map. But the markers, they persist?]

Thanks!

Blair

Tue Sep 01, 2015 1:59 pm

Sorry Yurii,

Realized how old my post was. Here is my current code which works - all except removing markers.

Blair Cox 20 hours ago
I am calling this javascript at the end of the success mapping. Creating the markers works great - after much struggle. Now I cannot clear the markers on each new service call.

I've been trying the suggestions listed here and stackoverflow. All that happens is more markers are added on each subsequent service call. Help?

//setMapOnAll(null);
var list_location = localStorage.getItem('farmProducts_storage');
var obj = JSON.parse(list_location);
var coordsArray;
coordsArray = [];
var coordsArray = obj;
var marker = [];
//var image = 'files/views/assets/image/Map-Marker-Bubble-Azure-icon.png';
var image = 'http://chart.apis.google.com/chart?ch...';
var map = Appery("Gmap").options.mapElement.gmap('get', 'map');

var CreateMarker = function(coordsArray, i){

Sun Sep 27, 2015 11:59 pm

Hi Blair,

Sorry for the huge delay.

So your code works correctly except of deleting of markers?

If so you need to add(Every type you create marker) to the array.

And then you can remove all markers in this array.

Here is your modified code:

precode

if (!self.markers) self.markers = [];

self.clearMarkers = function() {
for (var i = 0; i < self.markers.length; i++)
self.markers.setMap(null);

Code: Select all

 self&#46;markers = [];

}

// Sets the map on all markers in the array.
function setMapOnAll(map) {}

//setMapOnAll(null);
var list_location = localStorage.getItem('farmProducts_storage');
var obj = JSON.parse(list_location);
var coordsArray;
coordsArray = [];
var coordsArray = obj;
var marker = [];
//var image = 'files/views/assets/image/Map-Marker-Bubble-Azure-icon.png';
var image = 'http://chart.apis.google.com/chart?ch...';
var map = Appery("Gmap").options.mapElement.gmap('get', 'map');

var CreateMarker = function(coordsArray, i) {

Code: Select all

 var marker = new google&#46;maps&#46;Marker({ 
     position: new google&#46;maps&#46;LatLng(coordsArray[i]&#46;lat, coordsArray[i]&#46;lng), 
     title: coordsArray[i]&#46;business_name, 
     map: Appery("Gmap")&#46;gmap, 
 }); 

 self&#46;markers&#46;push(marker); 

 var infowindow = new google&#46;maps&#46;InfoWindow({ 
     content: ('' + coordsArray[i]&#46;business_name + '  
               ' + coordsArray[i]&#46;hours_season + '  
               ' + coordsArray[i]&#46;combinedAddress) 
               }); 
     &#47;&#47; var infowindow = new google&#46;maps&#46;InfoWindow({content: coordsArray[i]&#46;business_name});  
     google&#46;maps&#46;event&#46;addListener(marker, 'click', function() { 
     infowindow&#46;open(Appery("Gmap")&#46;gmap, marker); 
 });

};
for (var i = 0, j = coordsArray.length; i < j; i++)
CreateMarker(coordsArray, i);

/code/pre

Then when you need to remove all markers - you can use following JS code(for example on button click):

precode

self.clearMarkers();

/code/pre

Regards

Tue Sep 29, 2015 5:09 pm

Hi Yurii,

No worries - perfect timing actually! I had actually figured how to do all this on my own, except both our solutions still have a bug (yours doesn't account for updating the markers on subsequent calls). But for clearing, I want to do it each time a dropbox value changes. Works great, except it does complain about the 'markers' variable not being defined on the first pass. It worked okay despite this BEFORE the update over the weekend. Not it is intermittent and doesn't work at all when you push the app to the APK.

code
var list_location = localStorage.getItem('HomeProducts_storage');
var obj = JSON.parse(list_location);
var coordsArray = obj;
marker = [];
markers = [];
var image = 'http://www.buylocalnb.ca/markers/pinother.png';
map = new Appery("Gmap").options.mapElement.gmap('get', 'map');

var CreateMarker = function(coordsArray, i){

Code: Select all

 var marker = new google&#46;maps&#46;Marker({  
     position: new google&#46;maps&#46;LatLng( coordsArray[i]&#46;lat, coordsArray[i]&#46;lng ),  
     title: coordsArray[i]&#46;business_name,  
     map: Appery("Gmap")&#46;gmap, 
     icon: image, 

 });

// Adds a marker to the map and push to the array.
markers.push(marker);

Code: Select all

 var infowindow = new google&#46;maps&#46;InfoWindow({content: ('<div><strong>' + coordsArray[i]&#46;business_name + '</strong><br>' + coordsArray[i]&#46;hours_season + '<br>' + coordsArray[i]&#46;combinedAddress )}); 

 google&#46;maps&#46;event&#46;addListener(marker, 'click', function() {  
     infowindow&#46;open(Appery("Gmap")&#46;gmap,marker);  
 });

};
for (var i = 0, j = coordsArray.length; i < j; i++)
CreateMarker(coordsArray, i);

google.maps.event.addListener(map, 'bounds_changed', function() {

});
/code

To remove the markers, I call this bit of javascript. Now the issue starts because this is called each and every time the dropdown changes. On the very first pass, the markers have not been created yet, so the variable doesn't exist and it throws the error/warning. After the Appery update, this appears to be enough to freeze the app, rather than continuing as prior.

code
for(i=0; i<markers.length; i++){
markers.setMap(null);
}

/code

Both our solutions result in the same when firing on dropdown change, as the markers and variable do not yet exist.

We're just about ready to release the app - If I can fix this new issue.

The error is:

Uncaught TypeError: self.clearMarkers is not a function

How could I fire the clear markers IF the markers variable exists?

Cheers!

Tue Sep 29, 2015 5:11 pm

This image goes with my above comment. Note that I added the blue button to test Yurii's code only.

Tue Sep 29, 2015 6:18 pm

Well I figured it out!

if (typeof markers === "undefined") {
// no variable "v" is defined in the current scope
// or some variable v exists and has been assigned the value undefined
} else {
// some variable (global or local) "v" is defined in the current scope
// and it contains a value other than undefined
for(i=0; i<markers.length; i++){
markers.setMap(null);
}

}