Can't make appStudio GoogleMap Control use Google Places

1

I am trying to use the GoogleMap control. While it is easy to set up, I cannot figure out how to place markers (eg. for all restaurants near my location) onto the map. There are samples for webpages, but nothing I can find for appStudio.

Here is the code I have - I didn’t use the control here - just creating the map as I go.

 //For more documentation on the options, see
 //https://developers.google.com/maps/documentation/javascript/reference?csw=1
 var marker;
 var infowindow;
 var currentLat,currentLong;




 function gotLocation(location, lat, long) {
     GoogleMap1.mapOptions.latitude = location.coords.latitude;
     GoogleMap1.mapOptions.longitude = location.coords.longitude;
     GoogleMap1.refresh();

     //Put a marker on our location
     point = new google.maps.LatLng(location.coords.latitude, location.coords.longitude);
     marker = GoogleMap1.setMarker({
         position: point
     });
     //Add an infoWindow to our marker
     infowindow = GoogleMap1.setInfoWindow("Lat: " + location.coords.latitude + " Lng: " + location.coords.longitude, marker);
     currentLat = location.coords.latitude;
     currentLong = location.coords.longitude;
     console.log("current lat is " + location.coords.latitude);
     NSB.WaitCursor(false);
 }
 
  btnLocation.onclick = function() {
  // have to run this before you do anything else - call this getLocation button
     navigator.geolocation.getCurrentPosition(gotLocation);
     NSB.WaitCursor(true);
 };

 btnHideMarker.onclick = function() {
     if (typeof(marker) != "object") {
         return;
     };
     infowindow = undefined;
     marker.setMap(null);
     GoogleMap1.refresh();
 };

 btnShowTraffic.onclick = function() {
     GoogleMap1.trafficLayer = new google.maps.TrafficLayer();
     GoogleMap1.trafficLayer.setMap(GoogleMap1.map);
 };

 btnHideTraffic.onclick = function() {
     if (GoogleMap1.trafficLayer == undefined) {
         return;
     };
     GoogleMap1.trafficLayer.setMap(null);
 };
 
 
 
btnShowRests.onclick=function(){

// doesn't work - needs Places library still
    // Omaha is = {lat:41.2524,lng:-95.9980};
    // get current location
    currentLocation = {lat:currentLat,lng:currentLong};
    console.log("in btnShowRests, current lat and long are: " + currentLat + " " + currentLong)
        infowindow = new google.maps.InfoWindow();
        var service = new google.maps.places.PlacesService(map);
        service.nearbySearch({
          location: currentLocation,
          radius: 500,
          type: ['restaurant']
        }, callback);

      function callback(results, status) {
        if (status === google.maps.places..OK) {
          for (var i = 0; i < results.length; i++) {
            createMarker(results[i]);
          }
        }
      }

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

}

Here is the front end. The code in the btnShowRests.onclick is the code that does not work - debugger says “PlacesServiceStatus” doesn’t exist (I believe this is in the Places library).
I added the Places library to the project by putting this in the Extra Headers property:

Thoughts as to how to use the Places library here? Or I could use it with the Google Map control (I am trying to show all restaurants in the area).

Thanks for any help -

2

@cindycc, could you zip up your project and send it to me? I’ll give it a try here.

3

Here you go - there are several versions, one per form. Geroge.zip (16.8 KB)

4

I wasn’t sure which one of the apps you wanted me to look at - I tried MapMultiMarkRestaurants.

Opening the Chrome Debugger, I see these messages:

Screen Shot 2017-12-04 at 1.29.42 PM.png1019×145 34.4 KB

A good place to start would to resolve these, then see if things work better.

5

The file MyMapWorkdIFrame.nsx shows what I want to do, but it is doing it in a webpage (here is the webpage version - this is in the manifest of the project also - restaurants.html). That’s the one I want to do - but can’t figure out. I zipped these two together here and uploaded. Archive.zip (5.8 KB)

I tried to get to this in another project - I put the library and the API code in the extra headers of the project. Here is that doc. Doesn’t work, not sure what the errors mean.

Thanks so much - several students are trying to do this, and I can’t figure out how to do it inside of appStudio. MapsPlaces.nsx (39.1 KB)

The last one - my attempt to take my HTML one (restaurants.html) and work that code into appStudio. Doesn’t throw errors - just doesn’t do anything. SimplePlacesMap.nsx (15.8 KB)

6

You were pretty close. SimplePlacesMap.nsx (18.3 KB)

I added ‘map’ as a Container control, and initialized it with this code:

function Main() {
  google.maps.event.trigger(map, 'resize');
  var center = new google.maps.LatLng({
        lat: 41.2524,
        lng: -95.9980
    });
  map.panTo(center);
  }

I do this in Main() since that gets called after the form is completely rendered. Your attempt was drawing the map too soon.

7

Excellent - thanks. Just so I know - when you have a Main function, when
does it run?

I want to click on a button on the previous page and go to this map form
(see attached). When this is done, the map generates but does not fully
display unless you toggle it to entire screen. Am I missing something?

Thanks -

Cindy

GoodSimplePlacesMap2.nsx (21 KB)

8

the Main() function is run once loading all the forms (and creating all the controls) is complete.

There’s a onshow() event for each form. Have you tried using that to do the same refresh as I did in Main()?

9

Perfect - and I get it. Thanks for the help.

Cindy

10

George -
I have a student doing a google map using places - she (and others) are
getting a message that sounds like their apps can’t instantiate the google
object. Can you see if you have any ideas? It is on the form frmMaps.

Also, I plan to upload our conversations and your help to the message board
next week.

Thanks!

CIndy

GroceryExpress_Updated.zip (612 Bytes)

11

Did you upload the right file? There is nothing in it. It’s just 612 bytes long.

12

I’ll send you a copy Monday when they hand it in. Thanks

CIndy