AnsweredAssumed Answered

Give markers in google maps the name of a field

Question asked by haarbol on Dec 25, 2013
Latest reply on Dec 26, 2013 by haarbol

Hi all,

 

I've made some simple Filemaker databases in the past, but i've never worked with the webviewer and Google Maps before.

I have tried using Google to answer this question, but i haven't found a good answer yet, so i hope you can help me.

 

There is a database going around from a summit last year (by THomas Kunetz - http://www.filemaker.com/images/devrel/video/INT005_DevCon_2012.mp4)

that shows how to generate a HTML file that places multiple markers from your database automatically in a Google Map, which you can then display

through the webviewer.

 

What i want to do is to give those markers the name of a specific field in my database, but so far i've only managed to make the
marker that is first placed display the currently selected record, and the rest nothing.

 

The database i've used as a starting point is using this HTML code:

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>

<title>Google Maps Test</title>

<style type="text/css">

html, body {

  height: 100%;

  margin: 0;

  padding: 0;

}

 

#map_canvas {

  height: 100%;

}

</style>

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

<script type="text/javascript">

function initialize() {

    var markerBounds    = new google.maps.LatLngBounds();

    var markers            = new Array(

        [[MarkersArray]]

        );

    var markersTitle            = new Array(

        [[MarkersTitle]]

        );

 

   

    var myOptions = {

        zoom: 5,

        center: new google.maps.LatLng(46.52863469527167,2.43896484375),

        mapTypeId: google.maps.MapTypeId.ROADMAP,

        mapTypeControlOptions: {

            mapTypeIds: [google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.HYBRID]

        }

    };

   

    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

   

    var end = markers.length;

    for(var i=0; i<end; i++) {

        var marker = new google.maps.Marker({

            position: markers[i],

            map: map,

            title: markersTitle[i]

        });

       

        markerBounds.extend(markers[i]);

    }

   

    map.setCenter(markerBounds.getCenter());

    map.fitBounds(markerBounds);

}

</script>

</head>

<body onload="initialize()">

  <div id="map_canvas"></div>

</body>

 

</html>

 

And then, in the webviewer it calculates (substitutes) a few of those values.

For clearness ske -  i added the landmarks bit, which is the bit that is not working.

 

"data:text/html," &

 

Substitute (Landmarks::Html ;

    [ "[[MarkersArray]]" ; MarkersArray ( 1 ) ] ;

    [ "[[MarkersTitle]]" ; " ' "&Landmarks::Landmark_Name & " ' " ] ;

    [ "¶" ; "" ]

 

)

 

So my question is:

how can i give each marker (pin) that is placed, the name of the field that belongs to the long / lat values that are working correctly,

as a mouseover title or even a label that is permanently displayed?

 

 

Thank you and happy holidays

Outcomes