Forum | Appery.io

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

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.

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."

Hello,

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

Regards.

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

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

hi Poll,

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

M&M

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/...

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.

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);
});

}