Forum | Appery.io

Yes, I did

This is the code on the Page Show event, of the 2nd page

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

}
//****************************************************************

You might want to check if there is any other rogue code that is being executed
Or have you added any additional libraries etc?

This is what the page should look like if the code is executed on Page Show

https://d2r1vs3d9006ap.cloudfront.net...

////////////////////////////

var map;
var infowindow;

function initialize() {
var pyrmont = new google.maps.LatLng(-33.8665433, 151.1956316);

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

var request = {
location: pyrmont,
radius: 500,
types: ['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);
});
}

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

hi,

Couple of things. If you are referring to this example: https://developers.google.com/maps/do...

It doesn't use the map component but a canvas.

I just used the HTML component...and copied everything from the page I just mentioned...everything between the HTML tags (without the HTML tag) and pasted it in HTML component...and this is the result i get

And then the other thing you can do is to place a map component...and populate it with the places using the Google Places API. Is this what you are looking for? If yes then why would we need the code below?

////////////////////////////

var map;
var infowindow;

function initialize() {
var pyrmont = new google.maps.LatLng(-33.8665433, 151.1956316);

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

var request = {
location: pyrmont,
radius: 500,
types: ['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);
});
}

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

I am not very sure if I have a clear picture of how you are trying to achieve your objective

yes I also tried that one using HTML Component. And I also tried using the Appery Map Component but as I have said, it's working fine if the page if the code is loaded as Start Page but having errors when it is just navigated.

If you suggest using HTML component, how can I send parameters from the other page's components to the new page using HTML component?

It would be great if you can give me an example even just 2 to 3 parameters to pass like: Type of Establishment, radius and location.

ok, it seems like you'd prefer the Map component. Let me see if I can create a sample App for you with couple of pages and the three parameters you mentioned

I prefered the map component because i do not know how to pass parameters to HTML Component =D

To help you here's the Parameter page I have.

I do not know if this is the issue but, I also have a map on the Parameter Page

I get this error upon loading the establishmentPage
"You have included the Google Maps API multiple times on this page. This may cause unexpected errors."

Btw to test do you have your Google Places API key? Just in case you don't you can have one ready. I will send you an example in few minutes. You will need the key while making the REST API call

And did add this library in your external resources?

Because I don't think that is necessary. That could be causing

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