Jump to content
View in the app

A better way to browse. Learn more.
FMForums.com

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Colored Pin Point in Google Maps

JayDhee
in Calculation Engine (Define Fields)

Featured Replies

  • Newbies

Can you guys help me in this? i need to make the pin point colored in custom web in filemaker when generating a map. i tried several way but does not work. what line should i change or  what should i add? thank you very much




Substitute ( "<!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</title>
<style type=^^text/css^^>
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#map_canvas {
  height: 100%;
}
</style>

</head>
<body>
  <div id=^^map_canvas^^></div>

<script type=^^text/javascript^^>
function initMap() {
    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 markerBounds    = new google.maps.LatLngBounds();
    var markers            = new Array(
        [[MarkersArray]]
        );
    
    var infoWindow = new google.maps.InfoWindow;    
    
    function addMarker(options){
        var marker = new google.maps.Marker({map:map});
        marker.setOptions(options);
        
        google.maps.event.addDomListener(marker, 'click', function() {
            infoWindow.setContent(marker['info']);
    
            infoWindow.open(map, marker);
        });
    
        markerBounds.extend(options.position);
        
        return marker;
    }
    
    google.maps.event.addListener(map, 'click', function() {
        infoWindow.close();
    });
        
    var end = markers.length;
    for(var i=0; i<end; i++) {
        addMarker({
            position: markers[i]['position'],
            title: markers[i]['info'],
            info: markers[i]['info']
        });
    }
    
    map.setCenter(markerBounds.getCenter());
    map.fitBounds(markerBounds);

    var listener = google.maps.event.addListenerOnce(map, ^^idle^^, function() { 
      if (map.getZoom() > 16) map.setZoom(16); 
    });

};
</script>

<script async defer type=^^text/javascript^^ src=^^https://maps.googleapis.com/maps/api/js?key=" & $API_KEY & "&callback=initMap^^></script>

</body>
</html>

The way your question is framed, only an expert in Google Maps could attempt to answer it. I am not (I have long forgotten even the little I used to know).

If your question is about Filemaker calculations, then please explain what are the inputs to the calculation and show the exact result you expect to get. Even better, leave out the irrelevant parts of the HTML code and focus on the problematic part only.

Likewise for your previous question:
https://fmforums.com/topic/110936-multiple-pinpoint-for-google-map-using-java-script-map-api/

 

Create an account or sign in to comment

https://fmforums.com/topic/110943-colored-pin-point-in-google-maps/
Go to topic listing

Important Information

By using this site, you agree to our Terms of Use.

I accept

Configure browser push notifications
Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.