6 Replies Latest reply on Jul 15, 2017 3:14 PM by jonmyrah

    Webviewer: multiple coords shown in Google Maps

    barand

      Dear Filemaker users,

       

      I would like to use a sample HTML file (Google Maps JavaScript API Tutorial - YouTube ) for showing multiple coords in the Webviewer.

       

      The coordinates are stored in the fields "Latitude" and "Longitude". How can I paste the multiple coords in the html text?

       

      I pasted the code below (and the array where the coords have be to stored has the colour orange):

       

      <!DOCTYPE html>

      <html lang="en">

      <head>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <meta http-equiv="X-UA-Compatible" content="ie=edge">

        <title>My Google Map</title>

        <style>

          #map{

            height:400px;

            width:100%;

          }

        </style>

      </head>

      <body>

        <h1>My Google Map</h1>

        <div id="map"></div>

        <script>

          function initMap(){

            // Map options

            var options = {

              zoom:8,

              center:{lat:42.3601,lng:-71.0589}

            }

       

            // New map

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

       

            // Listen for click on map

            google.maps.event.addListener(map, 'click', function(event){

              // Add marker

              addMarker({coords:event.latLng});

            });

       

            /*

            // Add marker

            var marker = new google.maps.Marker({

              position:{lat:42.4668,lng:-70.9495},

              map:map,

              icon:'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'

            });

       

            var infoWindow = new google.maps.InfoWindow({

              content:'<h1>Lynn MA</h1>'

            });

       

            marker.addListener('click', function(){

              infoWindow.open(map, marker);

            });

            */

       

            // Array of markers

            var markers = [

              {

                coords:{lat:42.4668,lng:-70.9495},

                iconImage:'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png',

                content:'<h1>Lynn MA</h1>'

              },

              {

                coords:{lat:42.8584,lng:-70.9300},

                content:'<h1>Amesbury MA</h1>'

              },

              {

                coords:{lat:42.7762,lng:-71.0773}

              }

            ];

       

            // Loop through markers

            for(var i = 0;i < markers.length;i++){

              // Add marker

              addMarker(markers[i]);

            }

       

            // Add Marker Function

            function addMarker(props){

              var marker = new google.maps.Marker({

                position:props.coords,

                map:map,

                //icon:props.iconImage

              });

       

              // Check for customicon

              if(props.iconImage){

                // Set icon image

                marker.setIcon(props.iconImage);

              }

       

              // Check content

              if(props.content){

                var infoWindow = new google.maps.InfoWindow({

                  content:props.content

                });

       

                marker.addListener('click', function(){

                  infoWindow.open(map, marker);

                });

              }

            }

          }

        </script>

        <script async defer

          src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap">

          </script>

      </body>

      </html>

       

      The help is much appreciated

       

      Kind regards,

       

      Baran