Infowindow

[laura6372139]

Hi!

I load "runjavascritp" this code in the screen "prueba".

var cityList = [
['Chicago', 41.850033, -87.6500523, 1],
['Illinois', 40.797177,-89.406738, 2]
];

Code: Select all

 var demoCenter = new google.maps.LatLng(41,-87); 
 var boxList =[]; 

 function initialize() { 
     map = var map = Appery("googlemap_1").gmap;, { 
         zoom: 7, 
         center: demoCenter, 
         mapTypeId: google.maps.MapTypeId.ROADMAP 
     }); 
     addMarkers(); 
 } 

 function addMarkers(){ 
     for (var i = 0; i < cityList.length; i++) 
     { 
         marker = new google.maps.Marker({ 
             position: new google.maps.LatLng(cityList[i][1], cityList[i][2]), 
             map: map, 
             id: i, 
             title: cityList[i][0] 
         });          

         var boxText = document.createElement("div"); 
         boxText.id = i; 
         boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: yellow; padding: 5px;"; 
         boxText.innerHTML = "InfoBox for " + cityList[i][0]; 

         var myOptions = { 
             content: boxText 
             ,disableAutoPan: false 
             ,maxWidth: 0 
             ,pixelOffset: new google.maps.Size(-140, 0) 
             ,zIndex: null 
             ,boxStyle: { 
                 background: "url('[url=https://api.appery.io/rest/1/db/files/52810bdfe4b047690d3b713d/aaf6dbff-d0d6-4820-b003-8df18b917cd2.PueblosdeBenicadell.jpg]https://api.appery.io/rest/1/db/files...[/url]') no-repeat" 
                 ,opacity: 0.75 
                 ,width: "280px" 
             } 
             ,closeBoxMargin: "10px 2px 2px 2px" 
             ,closeBoxURL: "[url=http://www.google.com/intl/en_us/mapfiles/close.gif]http://www.google.com/intl/en_us/mapf...[/url]" 
             ,infoBoxClearance: new google.maps.Size(1, 1) 
             ,isHidden: false 
             ,pane: "floatPane" 
             ,enableEventPropagation: false 
         }; 

         var ib = new InfoBox(myOptions); 
         boxList.push(ib); 

         google.maps.event.addListener(marker,'click',(function(marker, i) { 
             return function() { 
                 boxList[i].open(map, this); 
             } 
         })(marker, i)); 

         google.maps.event.addDomListener(boxList[i].content_,'click',(function(marker, i) { 
                 return function() { 
                   window.location.replace("[url=http://stackoverflow.com]http://stackoverflow.com[/url]"); 
                 } 
               })(marker, i)); 
     } //endfor   
 } //end function 

This code in dreamweaver works well, but in appery it don't work.

Can you help me?

Thanks!

[Kateryna Grynko]

Hi Laura,

This is the same app, right?
How can I get to a page 'prueba'?

There is a JS code error on start page load event:preAppery( "mobilecarousel_139" ).carouFredSel/preThere is no method "carouFredSel".
What do you want to do?

[laura6372139]

sorry is other app!

Is this:

http://appery.io/app/mobile-frame?src...

[laura6372139]

I also try with this code but it doesn't work.

function initialize() {
var myOptions = {
zoom: 16,
center: new google.maps.LatLng(38.8213, -0.6111),
mapTypeId: google.maps.MapTypeId.ROADMAP
};

Code: Select all

          var map = new google.maps.Map($('div[dsid="googlemap_1"]').get(0), myOptions); 

         // -------------- MARKER 1  

var contentString1= ""+
""+
""+
""+ // here
""+
""+
"";

var infowindow1 = new google.maps.InfoWindow({
content: contentString1
});

var sfLatlng1 = new google.maps.LatLng(38.82098, -0.61109);
var marker1 = new google.maps.Marker({
position: sfLatlng1,
map: map,
title: "Portal de San Roc",
icon: "https://api.appery.io/rest/1/db/files..."
});
google.maps.event.addListener(marker1,'click',(function() {
return function() {
infowindow1.open(map,marker1);
}
}));

Code: Select all

         google.maps.event.addDomListener(content,'click',(function() { 
                 return function() { 
                    window.location.replace("page1.html") 
                 } 
               })); 
     } //endfor   
//end function           

// -------- END OF 1nd MARKER
google.maps.event.addDomListener(window, 'load', initialize);

I need that when I click on my market opens an infowindows, and when click on infowindows navigate to another page in the application.

Thanks!

[Maryna Brodina]

Hello! Delete pregoogle.maps.event.addDomListener(content,'click',(function() {
return function() {
window.location.replace("page1.html")
}
})); /pre2) Instead pregoogle.maps.event.addListener(marker1,'click',(function() {
return function() {
infowindow1.open(map,marker1);
}
}));/preuse pregoogle.maps.event.addListener(marker1,'click', function() {
infowindow1.open(map,marker1);
});/pre3) Instead pregoogle.maps.event.addDomListener(window, 'load', initialize); /pre use presetTimeout(initialize, 1000);/pre

[laura6372139]

Hi Maryna:

I need that when I click in infowindows navigate to another page of the application.

I know that infowindows isn't an event so I can not give a function.

[Maryna Brodina]

Hello! "I need that when I click in infowindows navigate to another page of the application." - you have a button there, on button click you'll navigate to another page. But if you want to navigate to page on click on infowindow content instead pregoogle.maps.event.addDomListener(content,'click',(function() {
return function() {
window.location.replace("page1.html")
}
})); /pre use pre$(document).off("click", "#content").on("click", "#content", function(){
Appery.navigateTo("screenName");
}); /pre

[laura6372139]

Hi Marina:

Thanks for your help but it doesn't work yet.

http://appery.io/app/mobile-frame?src...

I have tried with this code:
google.maps.event.addListener(marker1,'click',(function() {
return function() {
infowindow1.open(map,marker1);
}
}));

Code: Select all

        $(document).off("click", "#content").on("click", "#content", function(){ 
 Appery.navigateTo("pagina"); 

});

and with this one:

google.maps.event.addListener(marker1, 'click', function() {
infowindow1.open(map,marker1);
});

Code: Select all

    $(document).off("click", "#content").on("click", "#content", function(){ 
 Appery.navigateTo("pagina"); 

});

[Maryna Brodina]

Look's like you haven't made changes according to step 2 and 3 suggested here https://getsatisfaction.com/apperyio/...?

[laura6372139]

Hi Marina:

I tried with this code.

I think that I followed your instructions well.

But it doesn't work.

function initialize() {
var myOptions = {
zoom :17,
center: new google.maps.LatLng(38.8213, -0.6111),
mapTypeId: google.maps.MapTypeId.ROADMAP
};

var map = new google.maps.Map($('div[dsid="googlemap_1"]').get(0), myOptions);

var contentString1= "
Plaza y portal de Sant Roc";

var infowindow1 = new google.maps.InfoWindow({
content: contentString1
});

var sfLatlng1 = new google.maps.LatLng(38.82098, -0.61109);
var marker1 = new google.maps.Marker({
position: sfLatlng1,
map: map,
title: "Portal de San Roc",
icon: "https://api.appery.io/rest/1/db/files..."
});
google.maps.event.addListener(marker1, 'click', function() {
infowindow1.open(map,marker1);
});
$(document).off("click", "#content").on("click", "#content", function(){
Appery.navigateTo("pagina");
});
}

setTimeout(initialize, 1000);

Sorry for the inconvenience. Regards.

Thanks.