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 -