Infowindow

[laura6372139]

I have this code:

function initialize() {

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

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

var infowindow = new google.maps.InfoWindow({
content: "holdind"
});

var sfLatlng = new google.maps.LatLng(38.82098, -0.61109);
var marker = new google.maps.Marker({
position: sfLatlng,
map: map,
title: "Portal de San Roc",
icon: "https://api.appery.io/rest/1/db/files..."
});

google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);

});

}
google.maps.event.addDomListener(window, 'load', initialize);

I need to click on the infowindow and navigate to another page.

Thanks

[Maryna Brodina]

Hello! This should help http://stackoverflow.com/questions/13...

[laura6372139]

hello Maryna.

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

Code: Select all

 var boxList =[]; 

function initialize() {
var mymap = {
zoom :16,
center: new google.maps.LatLng(41, -0.87),
mapTypeId: google.maps.MapTypeId.ROADMAP
};

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

Code: Select all

     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('tipbox.gif') 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() { 
                   Appery.navigateTo ('Screen3', {reverse: false}); ) 
                 } 
               })(marker, i)); 
     }  
 }  

I try to enter several codes but not working

Code: Select all

 you can help me? 

Thanks

[Maryna Brodina]

Please clarify where did you add this code?

[laura6372139]

Hi Marina:

I add this code in the page "informacion":

event, load, runjavascript.

Thanks

[Maryna Brodina]

Please check are there any errors in console?

[laura6372139]

Hi Marina:

I have changed my code.

This code I load on my page "information":

Load runjavascript.

function initialize() {
var mapOptions = {
center: new google.maps.LatLng(65.18303, 20.47852),
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP};

Code: Select all

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

// -------------- MARKER 1 
 var sfLatlng = new google.maps.LatLng(59.96384, 11.04120); 

var marker1 = new google.maps.Marker({
position: sfLatlng,
map: map,
title: "Portal de San Roc",
icon: "https://api.appery.io/rest/1/db/files..."
});

Code: Select all

 // MARKER 1'S INFO WINDOW 
 var infowindow1 = new google.maps.InfoWindow({ 

content: "holdind"
});

Code: Select all

 // End of infowindow code 

Adding a click event to the marker
google.maps.event.addListener(marker1, 'click', function() {
// Calling the open method of the infoWindow
infowindow1.open(map, marker1);
});
return function() {
infowindow1.open(map, marker1);
google.maps.event.addListener(infowindow1, 'click', (function(){
infowindow1.location ('notificaciones.html'); }));
}
// -------- END OF 1nd MARKER

}
google.maps.event.addDomListener(window, 'load', initialize);

My console:

Code: Select all

      [url=https://d2r1vs3d9006ap.cloudfront.net/s3_images/1000195/consola.PNG?1387291262][img]https://d2r1vs3d9006ap.cloudfront.net/s3_images/1000195/consola_inline.PNG?1387291262[/img] [/url]

[laura6372139]

This is my public link:

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

[laura6372139]

but when I press the "infowindow" not navigates to the page "notifications"

[Kateryna Grynko]

Hi Laura,

It works for us. Please try cleaning cache.