I've been working on quite a nice program for a month or two now. I'm having an odd issue where clicking a marker on my map is giving a very vague script error. Literally just last night everything was working fine and all of a sudden this is happening.
First, here's a brief look at my map. As soon as this form (VB) loads, a list of records is pulled from my SQL Server database. A marker with a unique ID is created for each record. An InfoWindow is made for each marker, and the InfoWindow is filled with details from the columns for that record. I seriously had this part working flawlessly. I can click different markers on the map, and have their InfoWindow opened (while closing the previous InfoWindow if one was already open).
(Sorry for having to post these as links, I don't have the 10 reputation to post images). Now, all of a sudden when I click on a marker, I get the following script error. If I choose "Yes," another script error is shown. I can't figure out what's going on. If I comment out (effectively disabling) my click event for the marker, there is no script error, but of course the InfoWindows won't work. I did this to see if the script errors come up with the map just idling. I've tried clearing the content of the InfoWindow (leaving just "test" as its content) to rule that out; still get the script errors. I can't tell if this may be something going on on Google's end, I don't know. Is that possible? The URL noted in the first script error indicates that it's a problem in that script, which I think would indicate that this could be on their end?
And finally, my .htm. I should clarify that I am doing this in a Visual Basic program. I have a container on my form which I create and place a WebBrowser object into. Then I have the WebBrowser load this .htm page. This worked amazingly as of just a night or two ago and I can't figure out the problem. I've even opened a backup from two weeks ago and this isn't working.
<!DOCTYPE html>
<html>
<head><title></title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
padding: 0;
}
#map_canvas {
height: 100%;
}
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=true"> </script>
<script type="text/javascript">
var map;
var Markers = [];
function Initialize(zoomLevel, lat, lng, type) {
//Get the type of map to start.
//Need to convert the GoogleMapType enum
//to an actual Google Map Type
var MapType;
switch (type) {
case 1:
MapType = google.maps.MapTypeId.ROADMAP;
break;
case 2:
MapType = google.maps.MapTypeId.TERRAIN;
break;
case 3:
MapType = google.maps.MapTypeId.HYBRID;
break;
case 4:
MapType = google.maps.MapTypeId.SATELLITE;
break;
default:
MapType = google.maps.MapTypeId.ROADMAP;
};
var myLatlng = new google.maps.LatLng(lat, lng);
var myOptions = { zoom: zoomLevel, center: myLatlng, mapTypeId: MapType };
var MarkerSize = new google.maps.Size(48, 48);
map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
//google.maps.event.addListener(map, 'click', Map_Click);
google.maps.event.addListener(map, 'mousemove', Map_MouseMove);
google.maps.event.addListener(map, 'idle', Map_Idle);
}
//function Map_Click(e) {
// window.external.Map_Click(e.latLng.lat(), e.latLng.lng());
//}
function Map_MouseMove(e) {
window.external.Map_MouseMove(e.latLng.lat(), e.latLng.lng());
}
function Map_Idle() {
window.external.Map_Idle();
}
function DeleteMarkers() {
if (Markers) {
for (i in Markers) {
Markers[i].setMap(null);
google.maps.event.clearInstanceListeners(Markers[i]);
Markers[i] = null;
}
Markers.length = 0;
}
}
function LoadMarkers(JobID, CustomerName, PhotoURL, item, lat, lng, description, DateTimeRequested) {
var MarkerLatLng = new google.maps.LatLng(lat, lng);
var MarkerOption = { map: map, position: MarkerLatLng, title: name};
var Marker = new google.maps.Marker(MarkerOption);
var infowindow = new google.maps.InfoWindow(
{
content: "<font size='3'><b>" + item + "</b></font>" + "<font size='1'><br>Requested: " + DateTimeRequested + " by: " + CustomerName + "</font>"
+ "<hr width=75% align='left'>"
+ description + "<br><br><img width='48' align='center' src='myURLHere" + PhotoURL + "'</img>",
id: JobID
});
google.maps.event.addListener(Marker, 'click', function () {
typeof infoWindowsOpenCurrently !== 'undefined' && infoWindowsOpenCurrently.close(); //If there is infowwindow currently open, close it
infowindow.open(map, this); //Open a new one for the selected marker
infoWindowsOpenCurrently = infowindow; //Set the new info window to the temporary variable
});
google.maps.event.addListener(map, 'click', function () { infowindow.close(Marker.get('map'), Marker) && infoWindowsOpenCurrently == infowindow});
Markers.push(Marker);
MarkerLatLng = null;
MarkerOption = null;
}
function GetSelectedMarker() {
typeof infoWindowsOpenCurrently !== 'undefined' && window.external.Get_Selected_Marker(infoWindowsOpenCurrently.id);
}
</script>
</head>
<body>
<div id="map_canvas" style="width: 100%; height: 100%">
</div>
</body>
</html>
Open an info window. When you create an info window, it is not displayed automatically on the map. To make the info window visible, you need to call the open() method on the InfoWindow, passing it the Map on which to open, and optionally, the Marker with which to anchor it. If no marker is provided,...
The InfoWindowOptions object literal contains the following fields: content contains either a string of text or a DOM node to display in the info window. pixelOffset contains an offset from the tip of the info window to the location on which the info window is anchored.
// Handle focus manually. There are a couple of ways to change the location of an info window: Attach the info window to a new marker using the InfoWindow.open () method. Note: If you call open () without passing a marker, the InfoWindow will use the position specified upon construction through the InfoWindowOptions object literal.
Attach the info window to a new marker using the InfoWindow.open () method. Note: If you call open () without passing a marker, the InfoWindow will use the position specified upon construction through the InfoWindowOptions object literal. The InfoWindow class does not offer customization.
I'm with the same error here. I'm using Google Maps JS in WPF WebBrowser and 3 days ago was running perfectly. Today with the same source code I got that same error. Set the version of the Google Maps JS to 3.17 (src="http://maps.google.com/maps/api/js?v=3.17"). I did this:
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?v=3.17&sensor=false"/>
For more information check Google Documentation.
I encountered the same problem with VBA for Access. It works if I open the webpage in IE, Chrome, etc. but not within the VBA WebBrowser (Shell.Explorer.2 class). I'm inclinced to believe it's a Google bug. I found it extra weird because the error message references a line in my code which doesn't have that many lines.
To work around it for now, I forced v=3.17 for the API. Obviously it will only work as long as 3.17 is around.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With