Map generate InfoWindow content multiple markers

Mon Aug 24, 2015 3:28 pm

Hi,

After over a week of research and trial and error. I finally managed to get multiple markers to work - Perfect!

Now, the last part of the puzzle is to display the infowindow for each of these markers. Again, much time and research and trial and error has gone into this. But I'm stumped and stuck. Below is my last code effort based directly on the code snippets provided by Appery staff here in this forum.

It doesn't work. In fact, it doesn't even display the markers! It just throws and error.

Assertion failed: InvalidValueError: setMap: not an instance of Map; and not an instance of StreetViewPanorama

Can someone please provide the correct method to walk an array, display the marker AND populate the infowindow - please

var list_location = localStorage.getItem('County_Biz_List_Storage');
var obj = JSON.parse(list_location);
var coordsArray = obj;
var marker;
var image = 'http://chart.apis.google.com/chart?ch...';
var map = Appery("Gmap").options.mapElement.gmap('get', 'map');

Mon Aug 24, 2015 3:43 pm

Well isn't this just awesome.

Soooooo, it now works. My map id is Gmap. So once I made sure the references were correct in all areas. It works as required.

There you go new people - there is the solution

Sun Nov 22, 2015 8:24 pm

Code worked greate. I combined your and mine to get a custom Icon / Label and its clickable to open navigation window.

Thanks for the code

var list_location = localStorage.getItem('mysqlFireDivBattArray');
var obj = JSON.parse(list_location);
var coordsArray = obj;
var marker;
var image = '../img/db_red_circle.png';
var map = Appery("googlemap_6").options.mapElement.gmap('get', 'map');

var CreateMarker = function(coordsArray, i){
var marker = new MarkerWithLabel({
position: new google.maps.LatLng( coordsArray.Lat, coordsArray.Lon ),
icon: image,

Code: Select all

labelContent: coordsArray[i].Company, 
map: map, 

labelAnchor: new google.maps.Point(35, 0), 
labelClass: "labels", // the CSS class for the label 
labelStyle: {opacity: 0.75},  

 clickable: true

});
var infowindow = new google.maps.InfoWindow({content: coordsArray.Company});
google.maps.event.addListener(marker, 'click', function() {

infowindow.open(map,marker);

window.open('http://maps.apple.com/?daddr=' + (coordsArray.Lat) + "," + (coordsArray.Lon),'_system', 'location=yes');
});

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

Thu Jul 21, 2016 3:22 am

This is really fantastic thanks. Having an issue with my code.
First I am filling an array from a service response. I have confirmed the data is there, I can even count the records.
coordsArray.location does return -43.59670,172.38247

This does not work: position: new google.maps.LatLng( coordsArray.location ),
This does: //position: new google.maps.LatLng( -43.59670,172.38247 ),

any idea? Thanks

//var list_location = localStorage.getItem('myHouse');

var list_location = localStorage.getItem('myHouse');
var obj = JSON.parse(list_location);
var coordsArray = obj;
var marker;
var image = 'http://apppics.weebly.com/uploads/5/8...';
var map = Appery("googlemap_6").options.mapElement.gmap('get', 'map');

var CreateMarker = function(coordsArray, i){
var marker = new google.maps.Marker({
position: new google.maps.LatLng( coordsArray.location ),
//position: new google.maps.LatLng( -43.59670,172.38247 ),
title: coordsArray.storeName,
map: Appery("googlemap_6").gmap,
});
var infowindow = new google.maps.InfoWindow({content: coordsArray.storeName});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(Appery("googlemap_6").gmap,marker);
});
};
for (var i = 0, j = coordsArray.length; i < j; i++)

CreateMarker(coordsArray, i);
;