Showing Multiple Locations on a Single Google Map Web Viewer

Ziphius · September 17, 2012

Hi,

I have a relational database in which surveys are carried out and recorded in a survey table (parent table) and all manta rays sighted (they each have unique patterns) on the survey are recorded (child table).

surveys < manta ray sighted

The GPS location of each manta ray is recorded as a Latitude and Longitude coordinate (2 variables) in the child table. So first I would like to link a Google Map web viewer to show the location of that individual on a map. Google Earth would be preferable if that's even possible, but Google Maps will suffice.

I have another parent table (catalog table) to the manta ray table that has one record for each unique manta ray in the population. If a new manta ray is sighted that has never been seen before, a new record is created in the catalog table. So each manta ray in the catalog can have one or many times (surveys) in which it was sighted.

Unique manta rays (catalog) < manta ray sighted

Woud it be possible to view each of the locations in which that individual manta was observed on a single Google Map web viewer?

Any help with this would be greatly appreciated.

fseipel · September 21, 2012

Yes, this is possible by setting a data URL. First sign up for a free Google Maps API key. https://developers.g...utorial#api_key especially if you want to log usage.

You can then use a data URL by setting webviewer to go to a page such as this to show 3 markers. When the page loads, the Javascript will call the Google Maps API and insert the markers.

Substitute your key for 'your_key_goes_here'. Store below code in a variable and go to that URL.

Iterate through your table to build a lat, longitude coordinate list similar to that below to build marker list. This works great on Windoze, not sure if Macs will run JS this way with current FM/Safari. I have avoided double quotes below since those must be escaped in FM, substituted, or otherwise dealt with. Maptype satellite might be more appropriate than terrain.

If you just need to show one point no need for all this, e.g. https://maps.google.com/maps?q=36,-122&z=9 where z = zoom level.

data:text/html,<!DOCTYPE html>

<html>

<head>

html { height: 100% }

body { height: 100%; margin: 0; padding: 0 }

#map_canvas { height: 100% }

</style>

src='http://maps.googleap...sor=false'>

</script>

function initialize() {

var mapOptions = {

center: new google.maps.LatLng(37, -122),

zoom: 8,

mapTypeId: google.maps.MapTypeId.TERRAIN

};

var map = new google.maps.Map(document.getElementById('map_canvas'),

mapOptions);

var latLng = new google.maps.LatLng(36.9, -122.1);

var marker = new google.maps.Marker({ position: latLng, map: map });

var latLng = new google.maps.LatLng(36.7, -122.2);

var marker = new google.maps.Marker({ position: latLng, map: map });

var latLng = new google.maps.LatLng(36.5, -122.4);

var marker = new google.maps.Marker({ position: latLng, map: map });

}

</script>

</head>

</body>

</html>

Ziphius · October 3, 2012

fseipel,

Thanks for this but I'm afraid to say this is way over my head. The furthest I've gotten and I will detail it here for other beginners in my predicament, is to setup a simple GoogleMap showing only a single point using Latitude and Longitude coordinates.

In my layout for which I will have the Web Viewer, I create the following fields: Latitude, Longitude, and Zoom. In layout mode, on the menu I select Insert > Web Viewer, click on "specify" and paste in the following text and assign the appropriate fields to replace Latitude, Longitude, and Zoom:

"https://maps.google.com/maps?q=" & Latitude & "," & Longitude &"&z=" & Zoom & "&output=embed&iwloc=0"

Here is the link to the code:

http://www.briandunning.com/cf/1085

Sorry to be so primitive but unfortunately this is the level I am at.

In trying to move forward from here, I have many questions.

1. Where do I add the Google Maps API Key? It wasn't clear from your response.

2. Do I substitute your code to replace the single position code mentioned here? In other words, in the web viewer, click specify and paste in your code?

3. Within your code, which are variables that I need to create in my table and point to?

4. I have FMPro12 Advanced on a Mac using Safari, will this be a problem?

Sorry to bring this topic down to the idiot level but we all have to start somewhere.

Thanks for your understanding.

fseipel · October 7, 2012

I haven't tried with Safari. Attached sample reads the coordinates from a table and builds the JS. It works from Windows/FMPA 11/12. API key is stored in a global field; just insert into layout #1. Clicking button runs script to generate map, using a data url to invoke the Google API. You can also set up tooltips so when mouse is hovered over a point it displays a label, or an infowindow, as appropriate. This simple example displays the tooltips when you hover over a marker. If this doesn't work in WebViewer on Macs, you can always export the field to a file (e.g. map.html) and open in a browser. I believe there are also ways to achieve call-backs so that FM can respond when you click on map markers.

where omitting center and zoom level may be preferred. See

https://developers.google.com/maps/documentation/staticmaps/#Latlons

Of course, you then can't scroll or zoom unless you include FM buttons to do so.

Google_Maps.zip

Ziphius · October 30, 2012

This works fine on my iMac with Safari, thank you.

I've attached a modified version of your file (sorry only have fm12) to show the relationships that I am dealing with in my database design. Is there a way to draw the map in the CATALOG INDIVIDUALS table to show Lat, Lon positions from its related child SURVEYS table?

As for the portal in the SURVEYS layout, I want to be able to add records to the portal for each individual sighted on that survey using a value list displaying the current individuals in the CATALOG INDIVIDUALS table. If the individual sighted is an individual in the Catalog, I simply want to add it by selecting its primary key. However, it doesn't seem to recognize the primary key and adds it as a new record. If its a new individual not yet in the catalog, I want to be able to add that new individual to the CATALOG INDIVIDUALS table. Something is not working the way I have it set up but this is a separate issue.

Thanks.

Google_Maps2Brokenfmp12.zip

Matt Malyschko · October 31, 2012

I haven't tried with Safari. Attached sample reads the coordinates from a table and builds the JS. It works from Windows/FMPA 11/12. API key is stored in a global field; just insert into layout #1. Clicking button runs script to generate map, using a data url to invoke the Google API. You can also set up tooltips so when mouse is hovered over a point it displays a label, or an infowindow, as appropriate. This simple example displays the tooltips when you hover over a marker. If this doesn't work in WebViewer on Macs, you can always export the field to a file (e.g. map.html) and open in a browser. I believe there are also ways to achieve call-backs so that FM can respond when you click on map markers.

If you're willing to settle for a static map, not requiring API key, you can just use something along the lines of maps.googleapis.com/maps/api/staticmap?size=640x640&maptype=terrain&markers=color:blue|label:A|36.7,-122.2&markers=color:green|label:B|36.9,-122.1&markers=color:red|color:red|label:C|36.5,-122.4&sensor=false

where omitting center and zoom level may be preferred. See

https://developers.g...icmaps/#Latlons

Of course, you then can't scroll or zoom unless you include FM buttons to do so.

Is there a way to achieve this by having the address instead of latitude/longitude?

Dani Rubenstein · January 17, 2013

Thank You For the script here.

I have around 80 fields and i have a API key .

but when i run the script i get a black map i think it is a api problem.

Can some one please help me.

Thank You

Dani

Sign In

Showing Multiple Locations on a Single Google Map Web Viewer

Recommended Posts

Ziphius

fseipel

Ziphius

fseipel

Ziphius

Matt Malyschko

Dani Rubenstein

Create an account or sign in to comment

Create an account

Sign in

Browse

Site Support

Forums

Blogs

Marketplace

Activity

Important Information