My Microsoft Access form contains a web browser control that is populated by:
If radOSM is True then an OpenStreetMap is loaded, otherwise a Google map.
Both the OpenStreetMap and the Google map work fine if I load the URL directly into the browser:
The OSM version also works fine in my Access form, but the Google Maps version gives a script error at Line 0, character 0 and the URL of Google Maps API src:
Code:
If Forms!frmPhotos!radOSM Then
Forms!frmPhotos!WebBrowser.Navigate "localhost/LocatorO.php?lat=" & Me!fLatitude & "&lon=" & Me!fLongitude
Else
Forms!frmPhotos!WebBrowser.Navigate "localhost/LocatorG.php?lat=" & Me!fLatitude & "&lon=" & Me!fLongitude
End IfBoth the OpenStreetMap and the Google map work fine if I load the URL directly into the browser:
Code:
localhost/LocatorG.php?lat=52.354473&lon=4.895552
localhost/LocatorO.php?lat=52.354473&lon=4.895552
Code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Locator</title>
<style>#map {height:350px;width:350px;}</style>
<style type='text/css'>#map {height:300px;width:300px;}</style>
[highlight #73D216]<script src='[URL unfurl="true"]https://maps.googleapis.com/maps/api/js?key=[/URL][MyKey]'></script>[/highlight]
<script type='text/javascript' src='misc/StyledMarker.js'></script>
<script src='[URL unfurl="true"]https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>[/URL]
</head>
<body id=body onload='initMap()'>
<div id="map"></div>
<script>
var myLatLng = {lat: 52.354473, lng: 4.895552};
function initMap() {
var mapCanvas = document.getElementById('map');
var mapOptions = {center:myLatLng,zoom:18,mapTypeId:google.maps.MapTypeId.ROADMAP,streetViewControl:false,mapTypeControl:false,scaleControl:false,zoomControl:false,fullscreenControl:false};
var map = new google.maps.Map(mapCanvas,mapOptions);
var marker = new StyledMarker({styleIcon:new StyledIcon(StyledIconTypes.MARKER,{color:'00ff00',text:'*'}),position:myLatLng,map:map});
myLatLng = new google.maps.LatLng(52.354355,4.895760);
marker = new StyledMarker({styleIcon:new StyledIcon(StyledIconTypes.MARKER,{color:'ff0000'}),position:myLatLng,map:map});
myLatLng = new google.maps.LatLng(52.354355,4.895760);
marker = new StyledMarker({styleIcon:new StyledIcon(StyledIconTypes.MARKER,{color:'ff0000'}),position:myLatLng,map:map});
........(more markers added from php)
}
</script>
</body>
</html>