My current project involves using PHP to generate a JSON file from data stored in MySQL. One of the goals I have is to display certain pieces of this data in an information window on Google Maps whenever I click on a marker.
Although I've managed to make all markers visible on the map, I keep encountering the following error message:
Uncaught ReferenceError: InfoWnd is not definedI believe that there might be an issue with how I am setting up the info window, but despite trying out different methods, I always end up with the same error.
This is an outline of my JavaScript code so far:
** In order to initialize the map canvas:
<script type="text/javascript">
var map;
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(48.476, -81.312),
zoom: 18,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
}
</script>
<body onload="initialize()">
<div id="map_canvas" style="width=80%; height: 100%"></div>
** Additionally, creating markers and info windows:
<script type="text/javascript">
var blueIcon = "http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png";
var redIcon = "http://www.google.com/intl/en_us/mapfiles/ms/micons/red-dot.png";
var greenIcon = "http://www.google.com/intl/en_us/mapfiles/ms/micons/green-dot.png";
infoWnd = new google.maps.InfoWindow();
$(document).ready(function() {
$.ajax({
url: 'http://localhost/testing/map_json.php',
dataType: 'json',
success: function (jsonData) {
$.each(jsonData, function(key, data) {
var latLng = new google.maps.LatLng(data.lat, data.lng);
if ( data.R_1 === undefined ) {
if ( data.SysV >= 6.5 ) {
var marker = new google.maps.Marker({
position: latLng,
title: data.RTU_Addr,
icon: blueIcon
});
setInfoWindow();
}
else {
var marker = new google.maps.Marker({
position: latLng,
title: data.RTU_Addr,
icon: redIcon
});
setInfoWindow();
}
}
else {
if ( data.SysV >= 6.5 ) {
var marker = new google.maps.Marker({
position: latLng,
title: data.RTU_Addr,
icon: greenIcon
});
setInfoWindow();
}
else {
var marker = new google.maps.Marker({
position: latLng,
title: data.RTU_Addr,
icon: redIcon
});
setInfoWindow();
}
}
marker.setMap(map);
function setInfoWindow() {
google.maps.event.addListener(marker, 'click', function() {
infoWnd.setContent("hi");
InfoWnd.open(map, marker);
});
};
});
}
});
});
</script>
Does anyone have any suggestions on where I may have made a mistake?