Google Map info window not showing

[John4930205]

I am trying to pop open the info window after clicking the marker in Google Map, but it's not showing... Am I missing anything in my code? Any advice will be appreciated! Thx.

MY CODE:

var myLatlng = new google.maps.LatLng(21.291334,-157.840791);
var mapOptions = {
zoom: 5,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
}
var marker = new google.maps.Marker({
position: myLatlng,
title: "Testmarker1"
});
var infowindow = new google.maps.InfoWindow({
content: 'Hello'
});

//clicklistener
google.maps.event.addListener(marker,'click', function()
{

infowindow.open(map, marker);

});

Tiggr("googlemap1").options.mapElement.gmap('addMarker',marker);
Tiggr("googlemap1").options.mapElement.gmap(mapOptions);
Tiggr("googlemap1").options.mapElement.gmap("refresh");

[maxkatz]

The window doesn't open or the map doesn't show?

Do you get any JavaScript errors (in Chrome Developer Tools console)?

[John4930205]

Hi Max,

The map shows fine. After the map shows, then clicking on this marker, the info window doesn't pop open.

Chrome Develper Tools console says:

Uncaught ReferenceError: map is not defined mobilescreen1.js:76
Tiggr.DataSource.onComplete mobilescreen1.js:76
Q.trigger main.js:19
pC.(anonymous function).e
H.Ti.tm.projection
Q.trigger main.js:19
H.Bd
H.rl
(anonymous function) main.js:9
Q.trigger main.js:19
H.Aj
Q.T main.js:20

[John4930205]

Hi Max,

Based on the error msg, I added this line:
var map = new google.maps.Map(document.getElementById('map'), options);

Because it said, "Uncaught ReferenceError: map is not defined".

But still doesn't work...

Do I need to declare variable map at the bottom of code with Tiggr like this?Tiggr("googlemap1").options.mapElement.gmap(mapOptions);

Thx!

MY CODE:

var myLatlng = new google.maps.LatLng(21.291334,-157.840791);
var mapOptions = {
zoom: 5,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
}

////////////////// ADDED THIS LINE BUT DON'T WORK
var map = new google.maps.Map(document.getElementById('map'), options);
////////////////// END LINE

var marker = new google.maps.Marker({
position: myLatlng,
title: "Testmarker1"
});
var infowindow = new google.maps.InfoWindow({
content: 'Hello'
});

//clicklistener
google.maps.event.addListener(marker,'click', function()
{

infowindow.open(map, marker);

});

Tiggr("googlemap1").options.mapElement.gmap('addMarker',marker);
Tiggr("googlemap1").options.mapElement.gmap(mapOptions);
Tiggr("googlemap1").options.mapElement.gmap("refresh");

[maxkatz]

I'd access the map without using Tiggr("id") function. The function returns a jQuery Mobile component and Google Maps API probably works off DOM elements. I'd select the map directly using jQuery (as shown in Google Maps docs).

[John4930205]

So just placing this line of code should work, taken from Google Maps docs, but it doesn't...

var map = new google.maps.Map(document.getElementById('map'), options);

Is there another method you recommend?

Thanks!

[John4930205]

Hi Max,

I think this is a better example to move forward with. Please forget about what's posted above. Here is a simple Google map code I got from:
https://google-developers.appspot.com...

I placed the code below into geolocation1 - Complete - Run Custom Javascript

So after clicking on a button with Evoke Service will evoke geolocation1 and execute the code below.

But it's not working in my Tiggzi account...

Does Tiggzi have this script built in?

Is there some Tiggzi specific syntax missing below?

------------------------------------------------

Code: Select all

     var myLatlng = new google.maps.LatLng(-25.363882,131.044922); 
     var mapOptions = { 
       zoom: 4, 
       center: myLatlng, 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
     } 

     var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); 

     var infowindow = new google.maps.InfoWindow({ 
         content: 'Hello' 
     }); 

     var marker = new google.maps.Marker({ 
         position: myLatlng, 
         map: map, 
         title: 'Uluru (Ayers Rock)' 
     }); 
     google.maps.event.addListener(marker, 'click', function() { 
       infowindow.open(map,marker); 
     });

[Maryna Brodina]

Hello!
I just tested with this code (on Marker properties add action Run custom JS on click event):

var myLatlng = new google.maps.LatLng(21.291334, -157.840791);
var mapOptions = {
zoom: 5,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
}
var marker = new google.maps.Marker({
position: myLatlng,
title: "Testmarker1"
});
var infowindow = new google.maps.InfoWindow({
content: 'Hello'
});
//clicklistener
google.maps.event.addListener(marker, 'click', function() {
/***was/
/****|/
/***|/
/***V/
//infowindow.open(map, marker);
/**now/
/****|/
/***|/
/***V*/
infowindow.open(Tiggr("googlemap1").gmap, marker);
});

Code: Select all

                 Tiggr("googlemap1").options.mapElement.gmap('addMarker', marker); 
                 Tiggr("googlemap1").options.mapElement.gmap(mapOptions); 
                 Tiggr("googlemap1").options.mapElement.gmap("refresh"); 

and here is what I get after click on marker:

Please try this and let us know about the result

[John4930205]

Thank you Marina! It worked!!!! You are the best.
Thanks for looking into this in detail. This is solved.

[Maryna Brodina]

Glad to hear you get it working!