Forum | Appery.io

I already have and used the API Key. I also added the library. Do i have to remove it?

You can remove the library. I think that will clear this error

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

Deleting the library removed the Console Error.. This is what the console says now..

Oh wait.. By removing the library, I am now getting this when the EstablishmentMap Page is set to Start Page

instead of the properly working one before I removed the library

hi,

You can restore from this this backup. I created an example that does what you need. You don't have to reference any extra library. Just the Google Map component with the Google Places API will do the job.

The API goes like this

https://maps.googleapis.com/maps/api/...

Here is the link:
Remember to your own API Key.

And also check if your need to enable the Appery IO Proxy

https://www.dropbox.com/s/xcg0zpy9e35...

This is the code that does the job - with googlemap1 being the name of the Map Component
code
var REST_Status = localStorage.getItem("lsvRESTPlaceSuccess");

if (REST_Status === "1") { // Success

 var myOptions = { 
     zoom : 12, 
     center: new google.maps.LatLng(localStorage.getItem('lsvLatitude'), localStorage.getItem('lsvLongitude')), 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 }; 

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

 var json_data = JSON.parse(localStorage.getItem("lsvNearbyPlacesJSON")); 
 var placesData = json_data.results; 

 for (var i = 0; i < placesData&#46;length; i++) { 
     placeData = placesData[i]; 
     var sfLatlng = new google&#46;maps&#46;LatLng(placeData&#46;geometry&#46;location&#46;lat, placeData&#46;geometry&#46;location&#46;lng); 

     var marker = new google&#46;maps&#46;Marker({ 
         position: sfLatlng, 
         map: map, 
         title: placeData&#46;name, 
     });   

 }   

}
else { // Error, Failed
alert("Nearby places query failed!");
}
/code

// Added this to the Page show event of the Results page so that the map gets initialised first before the service gets called

code
var map;

function initialize() {
map = Apperyio("googlemap1").gmap;
if (!map)
{
setDelay();
}
else
{
restNearbyPlaces.execute();
}
}

function setDelay()
{
setTimeout(initialize, 50);
}

initialize();
/code

Thank you M&M! I appreciate it. i will try this out. I will keep you updated. Thanks a lot!

Hi M&M Thanks for the solution! I already applied the solution on my app.. But the info window upon clicking any marker on the map..

i tried putting

codevar infowindow = new google.maps.InfoWindow();

google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(place.name);
infowindow.open(map, this);
});
/code
based on the example i've seen. But it's not working..

I needed the info window because I will put a Get Direction link to show route to the clicked place marker.

Oh, I just fixed it. Thanks again M&M!

I still have few questions..

I want to create a function for the Clicked marker that says VISIT. Then whenever a user clicks on the VISIT, the number of visit for that establishment will be up by 1.

Then the MAP MARKER for the establishment will change based on the number of visits.

The same goes for other user of the app. So I am thinking of creating a new COLLENTION where all the VISITed establishments will be stored there with the number of visits. Then on the query, the Search function will also search on the collection.

Is this possible?

Ya i guess that is pretty much possible. You'll need to add a custom legend and you can easily shows icons and labels in there. You can populate the legend using javascript and of course you'll need that additional table / collection for keeping track of visits / clicks

What I am worrying is that, all the Request are sent to Google Places API so the function we have for the nearby search will not see the list or number of visits on the collection