How to show a satellite view using Lat./ Long. jQuery getLocation?

  • 2
  • 2
  • Question
  • Updated 1 year ago
  • Answered
I have the geo-location portion working in my app.  I can get a Google Map drawing of the coordinates.  What I would like to do is be able to show a satellite view of the image.  I have looked through the Google API, but I haven't found a way to switch views.  I would have thought the button to switch between maps and satellites would have been included.

FYI-I based my build of the GEOLOCATION app in the QB Exchange.

Thanks!
Photo of Neil Shepard

Neil Shepard

  • 1,248 Points 1k badge 2x thumb
  • smoking a pork shoulder

Posted 1 year ago

  • 2
  • 2
Photo of Matthew Neil

Matthew Neil

  • 31,438 Points 20k badge 2x thumb
Are you looking for this toggle in a report of multiple locations? or the mini map that is displayed on the form? or an all together different location?
Photo of Neil Shepard

Neil Shepard

  • 1,248 Points 1k badge 2x thumb
The preference is to just show the satellite image instead of the map image in the form itself.  Next option is a toggle in the corner of the map like that found on a Google Maps display, the one in the corner.

The top image is how QB shows maps based on the Address field.  The bottom is from the Geolocation app in the Exchange.





GEO.JS HTML Page 
jQuery(document).ready(function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(showPosition);
    }
  
var test = $.ajax({url: url,async:false,success: pushResult}).responseText;
   return false;
});
function showPosition(position){
      var editURL = "";
      editURL = "bmvifd7ns";
      editURL += "?act=API_EditRecord&key=" + QBU_recid;
      editURL += "&_fid_12=" + position.coords.latitude;
      editURL += "&_fid_13=" + position.coords.longitude;
     
      $.ajax({url: editURL,async:false});
      location.reload(true);
 }

The formula in the MAP field that is shown in bottom pic.

If([PCC Latitude]=0,
"Location Not Found!",
"<img src= \"http://maps.google.com/maps/api/staticmap?center="&[PCC Latitude]&"+"&[PCC Longitude]&"zoom=14&size=400x400\n&markers=color:blue%7Clabel:S%7C"&[PCC Latitude]&"+"&[PCC Longitude]&"&sensor=false\" alt=\"\"/>")
(Edited)
Photo of Dan

Dan

  • 1,176 Points 1k badge 2x thumb
Try modifying the "Show Map" formula like so:

If([Latitude]=0,
"Location Not Found!",
"<img src= " &
"https://maps.googleapis.com/maps/api/staticmap?"; &
"center="&[Latitude]&"+"&[Longitude] &
"&zoom=14" &
"&size=400x400" &
"&maptype=satellite" &
"&markers=color:blue%7Clabel:S%7C"&[Latitude]&"+"&[Longitude] &
">"
)
Photo of Neil Shepard

Neil Shepard

  • 1,248 Points 1k badge 2x thumb
That worked like a charm, though I had to remove the semicolon.

I looked in the Google Maps API again now that I know exactly what to look for, and sure enough there was my answer (said with self frustration).

Here is the final formula I used:
If([Latitude]=0,
"Location Not Found!",
"<img src=" & 
"http://maps.google.com/maps/api/staticmap?"&
"center="&[Latitude]&"+"&[Longitude]&
"&zoom=17"&
"&size=400x400"&
"&maptype=satellite"&
"&markers=color:red%7Clabel:%7C"&[Latitude]&"+"&[Longitude]&">")

Thanks!
Photo of Dan

Dan

  • 1,134 Points 1k badge 2x thumb
Weird, not sure how that semicolon crept in. Glad you got it working!