Help with Google Places Map and result

[Poll David]

I am using this code from Google Places Search

https://developers.google.com/maps/do...

The code seems to work fine by also following this

https://getsatisfaction.com/apperyio/...

I Run Javascript on the Page Component Load Event but it only works if the Page is loaded as Start Page. If I set other page as Start Page and Navigate to the Places Page, the map doesn't seem to work

If I set the EstablishmentMap Page as Start Page, here's what I get

If I set other Page as Start Page and Navigate to EstablishmentMap Page, here's what I get

and also, if I navigate on the map, it seems that the map is not fully loaded.

I really need help on this one

[Alena Prykhodko]

Hello,

Please provide us with a public app link (http://devcenter.appery.io/documentat...) and steps to reproduce.

Also check whether there are errors in console.

[Poll David]

Thanks for responding..

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

I set the SearchEstablishment as Start Page. This is where the parameters will come from to do the NearbySearch (Google Places). So filling up:

Location, Keyword, Type of Establishment and Boundary then Click or tap Search (green) then it will navigate to EstablishmentMap where I am having problem. Map and results are not showing unlike when I set the same page as Start Page.

Here's the Javascript on EstablishmentMap Page LOAD Event

code

var map;
var infowindow;

function initialize() {
var pyrmont = new google.maps.LatLng(15.168424, 120.5800724);

map = new google.maps.Map($("[name=googlemap_2]")[0], {
center: pyrmont,
zoom: 15
});

var request = {
location: pyrmont,
radius: 2000,
types: ['convenience_store']
};
infowindow = new google.maps.InfoWindow();
var service = new google.maps.places.PlacesService(map);
service.nearbySearch(request, callback);
}

function callback(results, status) {

if (status == google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results&#46;length; i++) {
createMarker(results);
}
}
}

function createMarker(place) {

var placeLoc = place&#46;geometry&#46;location;
var marker = new google&#46;maps&#46;Marker({
map: map,
position: place&#46;geometry&#46;location
});

google&#46;maps&#46;event&#46;addListener(marker, 'click', function() {
infowindow&#46;setContent(place&#46;name);
infowindow&#46;open(map, this);
});

}/code

I get this error on console.

"You have included the Google Maps API multiple times on this page. This may cause unexpected errors."

[Yurii Orishchuk]

Hello,

Please try to use "Page show" event handler instead of "Page load".

Regards.

[Poll David]

I also tried "Page Show" but i still have the same output when the page is not set as Start Screen

[Poll David]

The app I am creating lets the user search for nearby establishments.

The first page lets the user set the parameters:

location
radius
establishment type

upon clicking search, that EstablishmentMap will suppose to show the results on map with marker.

Please help

[M&M]

hi Poll,

Are you using the Map Component? Or the HTML component?

M&M

[Poll David]

Hi M&M thanks for the response..

I am using the MAP Component. I just called the component using this code:

map = new google.maps.Map($("[name=googlemap_2]")[0], {

based on a solution here https://getsatisfaction.com/apperyio/...

[M&M]

hi Poll,

I created 2 pages. One the first page I placed a button and then in the click event chose to navigate to the 2nd page which has the Map Component. In the page show event of 2nd page I placed your code. On this map page I added a button to take me back to the first page. And then repeatedly I navigated between both the pages. I didn't see any error on the console except for a warning that I think can be ignored for now. And also the map loaded completely.

[Poll David]

Did you place the whole Javascript? for Google Places Search?

var map;
var infowindow;

function initialize() {
var pyrmont = new google.maps.LatLng(15.168424, 120.5800724);

map = new google.maps.Map($("[name=googlemap_2]")[0], {
center: pyrmont,
zoom: 15
});

var request = {
location: pyrmont,
radius: 2000,
types: ['convenience_store']
};
infowindow = new google.maps.InfoWindow();
var service = new google.maps.places.PlacesService(map);
service.nearbySearch(request, callback);
}

function callback(results, status) {

if (status == google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
createMarker(results);
}
}
}

function createMarker(place) {

var placeLoc = place.geometry.location;
var marker = new google.maps.Marker({
map: map,
position: place.geometry.location
});

google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(place.name);
infowindow.open(map, this);
});

}