[AccessD] [EXTERNAL] Re: New Web Browser Control - Local Files for Google Maps

Gustav Brock gustav at cactus.dk
Sun May 21 01:37:43 CDT 2023


Hi David

You skipped this variation:

          var image = 'https://msaccess/'+dir+'/htm/images/' + parms[3]+ '.png'

Works for me when I click the control.

/gustav

Fra: David Emerson<mailto:newsgrps at dalyn.co.nz>
Sendt: 21. maj 2023 01:51
Til: 'Access Developers discussion and problem solving'<mailto:accessd at databaseadvisors.com>
Emne: Re: [AccessD] [EXTERNAL] Re: New Web Browser Control - Local Files for Google Maps

Hi all,

I tried these permutations with no success:

          var image = 'file:///https://msaccess/'+dir+'\htm\images\<file:///https:/msaccess/'+dir+'/htm/images/>' + parms[3]+ '.png'
          var image = 'file:///https:\\msaccess\'+dir+'\htm\images\<file:///https:/msaccess/'+dir+'/htm/images/>' + parms[3]+ '.png'
          var image = 'https://msaccess/'+dir+'\htm\images\<https://msaccess/'+dir+'/htm/images/>' + parms[3]+ '.png'
          var image = 'https:\\msaccess\'+dir+'\htm\images\<https://msaccess/'+dir+'/htm/images/>' + parms[3]+ '.png'

Here is the whole file text (I have removed the actual Google api key):

<!DOCTYPE html>
<!-- saved from url=(0016)http://localhost -->
<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 JavaScript API v3 Example: Directions Waypoints</title>
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0; padding: 0 }
  #map-canvas { height: 100% }
</style>
// *** Need to replace key with actual key in next line ***
<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=ReplaceWithGoogleKey"></script<http://maps.google.com/maps/api/js?key=ReplaceWithGoogleKey%22%3e%3c/script>>
<script type="text/javascript">
  var directionDisplay;
  var directionsService = new google.maps.DirectionsService();
  var map;

  function initialize() {
    showPoints();
  }


  function showPoints() {
    var overlaytype;
        var dir;
    var parms = new Array();
    var checkboxArray = document.getElementById("mappoints");

        //Get avg lat, lng so we can determine how to center the map
        //Get min and max lat, lng so we can determine zoom level for map
        var avglat = 0;
        var avglng = 0;
        var minlat = 9999;
        var minlng = 9999;
        var maxlat = -9999;
        var maxlng = -9999;
        var scale = 0;
        var latlng = new Array();
        var sumlat = 0;
        var sumlng = 0;
        var basisscale = 0.062163 * 1.1;        // calculated lat lng area that will fit at zoom 13, plus 10%
        var basiszoom = 13;     // 13 is our basis zoom value for scaling to other zoom values.
        var zm = 1;     // default
        var tempscale = 0;
        //Sum lat, lng for averaging. Find min and max values for zoom.
        for (var i = 0; i < checkboxArray.length; i++) {
                latlng = checkboxArray[i].value.split(";");
                if (i^=0) {
                        sumlat = sumlat + (+latlng[0])
                        sumlng = sumlng + (+latlng[1])
                        if (+latlng[0] < minlat) {minlat = +latlng[0]}
                        if (+latlng[1] < minlng) {minlng = +latlng[1]}
                        if (+latlng[0] > maxlat) {maxlat = +latlng[0]}
                        if (+latlng[1] > maxlng) {maxlng = +latlng[1]}
                }
        }
        //default
        avglat = latlng[0];
        avglng = latlng[1];
        if (checkboxArray.length > 0) {
                //Compute average lat, lng
                avglat = sumlat/(checkboxArray.length-1);
                avglng = sumlng/(checkboxArray.length-1);
        }
        //Find the largest difference between points on map
        scale = Math.max(maxlat-minlat,maxlng-minlng);
        tempscale = basisscale
        // Find the smallest scale, then we'll work up
        for (var i = (basiszoom+1); i<21;i++) {
                tempscale = tempscale/2;
        }
        // Find the appropriate zoom level based on the farthest apart points being drawn
        // Zoom level can be between 1 (farthest out) and 20 (closest)
        for (var i = 20; i>0; i--) {
                if (scale < tempscale) {
                        //Found an appropriate zoom level
                        zm = i;
                        break;
                }
                tempscale = tempscale * 2;
        }

 //alert("about to enter for loop");
    for (var i = 0; i < checkboxArray.length; i++) {
          parms = checkboxArray[i].value.split(";");
      if (i==0) {
        overlaytype = parms[0];
//alert("overlaytype=" + overlaytype);
                // The second parm is the folder this application resides in. The parent folder to the /htm subfolder.
                dir = parms[1];
//alert("dir=" + dir);
                dir = dir.replace(/%20/g," ");
                //alert("dir2=" + dir);
                //dir = dir.replace("\\","/");
                // replace all backslashes with forward slash. the backslash is a special character in javascript.
                // str.replace(/find/g,"replace");
                dir = dir.replace(/\\/g,"/");
//alert("dir=" + dir);
      } else {
//alert("processing" + checkboxArray[i].value);
        if (i==1) {
           var firstlocation = new google.maps.LatLng(avglat, avglng);
           var myOptions = {
             zoom: zm,
             mapTypeId: google.maps.MapTypeId.ROADMAP,
             center: firstlocation
           }
           map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        }
//alert("overlaytype 2 =" + overlaytype);
        switch(overlaytype)
        {
        case "1":
          alert("case 1");
          break;
        case "2":
          // "Heat Map"

// *** Here is the line that doesn't seem to work ***

//          var image = 'file:///'+dir+'/htm/images/' + parms[3] + '_Marker' + parms[4]+ '.png'
//          var image = 'file:///'+dir+'/htm/images/' + parms[3]+ '.png'

//          var image = 'file:///https://msaccess/'+dir+'\htm\images\<file:///https:/msaccess/'+dir+'/htm/images/>' + parms[3]+ '.png'
//          var image = 'file:///https:\\msaccess\'+dir+'\htm\images\<file:///https:/msaccess/'+dir+'/htm/images/>' + parms[3]+ '.png'
//          var image = 'https://msaccess/'+dir+'\htm\images\<https://msaccess/'+dir+'/htm/images/>' + parms[3]+ '.png'
//          var image = 'https:\\msaccess\'+dir+'\htm\images\<https://msaccess/'+dir+'/htm/images/>' + parms[3]+ '.png'

//alert(image);
          var marker = new google.maps.Marker({
             position: new google.maps.LatLng(parms[0],parms[1]),
             map: map,
            icon: image
          });
          attachSecretMessage(marker, parms[4]);

          break;
        default:
          alert("case default");
        }

      }
    }
  }

 var prev_infowindow = false;
  function attachSecretMessage(marker, secretMessage) {
      var infowindow = new google.maps.InfoWindow({
          content: secretMessage
      });

      marker.addListener('click', function () {
          if (prev_infowindow) {
              prev_infowindow.close();
          }

          prev_infowindow = infowindow;
          infowindow.open(marker.get('map'), marker);
      });
  }

function jsleep(ms){
        //s=s*1000;
        var a=true;
        var n=new Date();
        var w;
        var sMS=n.getTime();
        while(a){
                w=new Date();
                wMS=w.getTime();
                if(wMS-sMS>ms) a=false;
        }
}

</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="float:left;width:100%;height:100%;"></div>
<div id="control_panel" style="float:right;width:30%;text-align:left;padding-top:20px">
<select multiple id="mappoints">
  <option value="2;C:\AATemp">2</input>
  <option value="-41.280556;174.778278;CTL;BuildingMarker;Name: CTL
<br>70 Featherston Street
<br>Wellington
<br>6011">Central </input>
  <option value="-41.11346;174.8469;HH01;ManholeMarker;Name: HH01
<br>1 Gloaming Hill
<br>Titahi Bay
<br>Porirua
<br>5022">1 Gloaming Hill</input>
</select>
</div>
</body>
</html>



More information about the AccessD mailing list