AnsweredAssumed Answered

Webviewer: multiple coords shown in Google Maps

Question asked by barand on Jul 12, 2017
Latest reply on Jul 15, 2017 by jonmyrah

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

Outcomes