Search Field for Google Map and key


#1

I have two questions:

  1. I saw in this forum that appStudio folks were adding an API Key property to the Google Map control. I don’t see it - so where does one enter the API Key?
  2. Using the Google Map control, is it possible to add a search box, then have the map show the results? I can do this in HTML but not in appStudio. Is there a way to just embed the HTML on a form and do it that way?

Here is the code I am trying to use without using HTML:

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

  var map = new google.maps.Map(document.getElementById('map'), {
    center: pyrmont,
    zoom: 15,
    scrollwheel: false
  });

  // Specify location, radius and place types for your Places API search.
  var request = {
    location: pyrmont,
    radius: '500',
    types: ['store']
  };

  // Create the PlaceService and send the request.
  // Handle the callback with an anonymous function.
  var service = new google.maps.places.PlacesService(map);
  service.nearbySearch(request, function(results, status) {
    if (status == google.maps.places.PlacesServiceStatus.OK) {
      for (var i = 0; i < results.length; i++) {
        var place = results[i];
        // If the request succeeds, draw the place location on
        // the map as a marker, and register an event to handle a
        // click on the marker.
        var marker = new google.maps.Marker({
          map: map,
          position: place.geometry.location
        });
      }
    }
  });
}



Form1.onshow=function(){
  // Run the initialize function when the window has finished loading.
  //google.maps.event.addDomListener(window, 'load', initialize);
  initialize();
   
}

Thanks-


#2

ad 1. Added in 6.2.4. There’s a new property in the GoogleMap control for this.


#3

@cindycc, could you surround any code in your messages with triple left ticks? It will be nicely formatted.


#4

Great. I updated. Next question - how do I include the Google places library? Here is the HTML to include this file using HTML.

<script><src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap" async defer></script>


#5

There is a project property called “extraheaders”. Put it in there.


#6

Great! Now, the second question - does anyone have experience using Google Places with the appStudio GoogleMap widget? See my first post for details.