0 Replies Latest reply on Aug 22, 2011 3:19 PM by dhafitch

    Map on Web Viewer does not work using the data URI schema

    dhafitch

      Title

      Map on Web Viewer does not work using the data URI schema

      Post

      I am trying to use GoogleMaps to map localities of species.  The database would find all the localities records associated with a particular species and then use a WebViewer to show the species distribution.

      I made html that I was going to feed into a WebViewer using the data:text/html, scheme.  The html works great if the WebViewer's URL is set to the html file (http://server/maptest.html), but only shows a blank white box when the WebViewer URL is set to the data scheme (i.e., "data:text/html," & <all the text in the html file between quotes>.

      The reason I would like to use the data scheme is, of course, to dynamically add data from database fields into the html.

      Any suggestions would be much appreciated.  Below is the html code.

      dave

       

      <!DOCTYPE html>
      <html>
      <head>
      <meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
      <title>Map for Strain Locality</title>
      <style type='text/css'>
      html, body {height: 100%; font-family: Arial, Helvetica, sans-serif; font-size: medium;}
      #map {width: 500px; height: 300px; border: 1px solid black;}
      </style>
      <noscript>To see strain locality maps, please enable JavaScript in your web browser.</noscript>
      <script type='text/javascript' src='http://maps.google.com/maps/api/js?sensor=false&language=en'></script>
      <script type='text/javascript'>

      (function() {

      // Set variables for mapping; these could be substituted with FM Pro fields.
      var latitude = 40.1;
      var longitude = -46.2;
      var specimen = 'DB4088';
      var information = 'This is a description';

      // Encapsulate in an anonymous function to ensure script runs after page is loaded.
      window.onload = function() {

      // Set GoogleMaps options.
      var options = {
      zoom: 3,
      center: new google.maps.LatLng(latitude, longitude),
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      disableDefaultUI: true,
      navigationControl: true,
      navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
      mapTypeControl: true,
      mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}
      };

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

      // Make the marker on the map.
      var marker = new google.maps.Marker({
      position: new google.maps.LatLng(latitude, longitude),
      map: map,
      title: specimen
      });

      // Set up an information window for the marker.
      var infowindow = new google.maps.InfoWindow({
      content: '<p><b>' + specimen + '</b></p><p>' + information + '</p>'
      });

      // Add a click event to the marker to pop up the info window.
      google.maps.event.addListener (marker, 'click', function() {
      infowindow.open(map, marker);
      });

      // end of window.onload function.
      };

      })();
      </script>
      </head>
      <body>
      <div id='map'></div>
      </body>
      </html>