Develop Reference

Unexpected token < Javascript code in PHP

Hello I have a file with the next code, a file named google-maps.php
<script>
var customIcons = {
restaurant: {
icon: 'img/homepage/pin.png'
},
cafenele: {
icon: 'img/homepage/pni2.png'
}
};
var markerGroups = {
"restaurant": [],
"cafenele": []
};
function load() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(47.059516, 21.947613),
zoom: 13,
scrollwheel: false,
mapTypeId: 'roadmap'
});
var infoWindow = new google.maps.InfoWindow();
// Change this depending on the name of your PHP file
var bounds = new google.maps.LatLngBounds();
downloadUrl("googlemaps/phpsqlajax_genxml2.php", function (data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var id_marker = markers[i].getAttribute("id_marker");
var name = markers[i].getAttribute("name");
var category = markers[i].getAttribute("category");
var address = markers[i].getAttribute("address");
var img = markers[i].getAttribute("img");
var phone = markers[i].getAttribute("phone");
var schedule = markers[i].getAttribute("schedule");
var link = markers[i].getAttribute("link");
document.getElementById('categorii').src = img;
var type = markers[i].getAttribute("type");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
bounds.extend(point);
var html = "<u class='title-google-maps'>" + name + "</u> <p class='google-maps'>" + category + "</p>" + address + "<p class='google-maps'>" + phone + "</p>" + "<p class='google-maps-2'>" + schedule + "</p>" + link;
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
id_marker: id_marker,
image: img,
type: type
});
if (!markerGroups[type])
markerGroups[type] = [];
markerGroups[type].push(marker);
marker.setVisible(false);
bindInfoWindow(marker, map, infoWindow, html);
}
map.fitBounds(bounds);
toggleGroup("spa");
});
}
function toggleGroup(type)
{
for (var key in markerGroups)
{
for (var i = 0; i < markerGroups[key].length; i++)
{
var marker = markerGroups[key][i];
if (type == key) {
marker.setVisible(true);
} else
{
marker.setVisible(false);
}
}
}
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function () {
infoWindow.setContent(html);
infoWindow.open(map, marker);
document.getElementById('categorii').src = marker.image;
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function () {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {
}
</script>
If I put my code in JS the code works but I need to put in PHP file in future I want to echo some data from database. The error I have in console is Uncaught SyntaxError: Unexpected token< . Why is working if the file type is JS and why is not working on PHP file type? What cand I do?

You need to close php tag before script and open in after script like this
<?php
//some php code
?>
<script>
...
..
</script>
<?php
//php code
?>

I want to load all the images in a folder in a google maps info window

I am loading a bunch of markers into google maps from an xml file. Each marker's name will correspond with a folder of images on the server. When populating the information box I want to display all the images in the corresponding folder.
www.frackwatch.co.za
Everything works except the images do not display. In their place instead is [Object][Object].
function load() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(-31.5, 24.0),
zoom: 7,
mapTypeId: 'satellite'
});
var infoWindow = new google.maps.InfoWindow;
// Change this depending on the name of your PHP file
downloadUrl("genxml.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var info = markers[i].getAttribute("info");
var name = markers[i].getAttribute("name");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var folder = "attachments/" + name +"/";
var html = "<b>" + info + "</b> <br/>" + $.ajax({
url : folder,
success: function (data) {
$(data).find("a").attr("href", function (i, val) {
if( val.match(/\.(jpeg|png|gif)$/) ) {
$("body").append( "<img src='"+ folder + val +"'>" );
}
});
}
});
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icn
});
bindInfoWindow(marker, map, infoWindow, html);
}
});
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
<div id="map"></div>
Correct code but only loads images for the first marker:
function load() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(-29, 25.0),
zoom: 6,
mapTypeId: 'satellite'
});
var infoWindow = new google.maps.InfoWindow;
// Change this depending on the name of your PHP file
downloadUrl("genxml.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var info = markers[i].getAttribute("info");
var id = markers[i].getAttribute("id");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var folder = "/attachments/" + id +"/";
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icn
});
$.ajax({
url : folder,
success: function (data) {
var html = "<b>" + info + "</b><br/>";
$(data).find("a").each(function () {
$this = $(this)
if($this.attr('href').match(/\.(jpg|png|gif|jpeg)$/)) {
html += "<img src="+ folder + $this.attr('href') + ">";
}
});
bindInfoWindow(marker, map, infoWindow, html);
}
});
}
});
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}

var html = "<b>" + info + "</b> <br/>" + $.ajax({url : folder,success: function (data) {$(data).find("a").attr("href", function (i, val) {if( val.match(/\.(jpeg|png|gif)$/) ) { $("body").append( "<img src='"+ folder + val +"'>" );} });}});;
The $.ajax function does not return anything. Check the documentation.
So the var html = [...] + $.ajax is broken.
You are trying to display all images in a folder in a InfoWindow ?
If so, it should something like :
var folder = "attachments/" + name +"/";
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icn
});
$.ajax({
url : folder,
success: function (data) {
var html = "<b>" + info + "</b> <br/>";
$(data).find("a").each(function () {
$this = $(this)
if($this.attr('href').match(/\.(jpeg|png|gif)$/)) {
html += "<img src=" + $this.attr('href') + ">";
}
});
bindInfoWindow(marker, map, infoWindow, html);
}
});
bindInfoWindow should be in the ajax callback otherwise the result can be there yet.
A cleaner way would be that genxml.php lists all images so you won't have to request the files in folder afterwards.

Google Directions to wrong marker

I have a set of markers, and when clicked on a marker there is a button that gets directions. The problem is that it only gives directions to the last loaded marker from the xml, not to each marker individually. Here is my code, maybe someone can tell what I'm doing wrong. Thank you.
UPDATE: WORKING CODE, QUESTION ANSWERED
var map;
var point;
var directionsDisplay;
var directionsService;
var marker;
var myLatLng;
var marklat;
var marklong;
var markers;
var DirLat;
var DirLng;
function loadGoogleMap(){
// load google map
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&' +
'callback=MyMap';
document.body.appendChild(script);
}
var map = ''
function MyMap(){
directionsDisplay = new google.maps.DirectionsRenderer();
directionsService = new google.maps.DirectionsService();
var im = //user location icon
var CustomMarker = //marker icon location
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(locate, noPos());
} else {
noPos();
}
function locate(position){
myLatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var mapOptions = {
zoom: 12,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoomControl: false,
streetViewControl: false,
mapTypeControl: false,
panControlOptions: { position: google.maps.ControlPosition.TOP_RIGHT},
zoomControlOptions: { position: google.maps.ControlPosition.TOP_RIGHT }
}
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var userMarker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: im
});
var infoWindow = new google.maps.InfoWindow;
downloadUrl("phps/xmltest.php", function(data) {
var xml = data.responseXML;
markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var nam = markers[i].getAttribute("name");
var name = nam.replace('=', '\'');
var address = markers[i].getAttribute("address");
var dt1 = markers[i].getAttribute("date1");
var dt2 = markers[i].getAttribute("date2");
var dt3 = markers[i].getAttribute("date3");
var tm1 = markers[i].getAttribute("time1");
var tm2 = markers[i].getAttribute("time2");
var tm3 = markers[i].getAttribute("time3");
var pid = markers[i].getAttribute("PID");
var DirLat = markers[i].getAttribute("lat");
var DirLng = markers[i].getAttribute("lng");
var d = Math.round(Math.random()*1679735965724*236896135089834);
var raw = pid * d;
//move up the creation of point
point = new google.maps.LatLng(
DirLat,
DirLng);
marker = new google.maps.Marker({
map: map,
position: point,
icon: CustomMarker,
id: raw,
id2: d
});
var content = "<button onclick='getDir();'>Get Directions</button>";
var jshtml = "<button onclick='raw();'>More Info</button>"; //an href function that redirects
var html = "<b>" + name + " " + content+ ' ' + jshtml+ "</b> <br/>" + "Date of Yard Sale: " + dt1 + ' ' + tm1 + ' ' + dt2 + ' ' + tm2 + ' ' + dt3 + ' ' + tm3;
bindInfoWindow(marker, map, infoWindow, html);
}
});
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker, html);
center: position;
document.getElementById('iLat').value = marker.getPosition().lat().toFixed(6);
document.getElementById('iLng').value = marker.getPosition().lng().toFixed(6);
document.getElementById('iRaw1').value = marker.id;
document.getElementById('iRaw2').value = marker.id2;
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send();
}
function doNothing() {}
}
function noPos(error){
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(41.850033, -87.6500523),
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoomControl: true,
streetViewControl: false,
mapTypeControl: false,
panControlOptions: { position: google.maps.ControlPosition.TOP_RIGHT},
zoomControlOptions: { position: google.maps.ControlPosition.TOP_RIGHT }
}
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var infoWindow = new google.maps.InfoWindow;
// Change this depending on the name of your PHP file
downloadUrl("phps/xmltest.php", function(data) {
var xml = data.responseXML;
markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var nam = markers[i].getAttribute("name");
var name = nam.replace('=', '\'');
var address = markers[i].getAttribute("address");
var dt1 = markers[i].getAttribute("date1");
var dt2 = markers[i].getAttribute("date2");
var dt3 = markers[i].getAttribute("date3");
var tm1 = markers[i].getAttribute("time1");
var tm2 = markers[i].getAttribute("time2");
var tm3 = markers[i].getAttribute("time3");
var pid = markers[i].getAttribute("PID");
var d = Math.round(Math.random()*1679735965724*236896135089834);
var raw = pid * d;
var jshtml = "<button onclick='raw();'>More Info</button>";;
var html = "<b>" + name + ' ' + jshtml + "</b>" + "<br>" + "Date of Yard Sale: " + dt1 + ' ' + tm1 + ' ' + dt2 + ' ' + tm2 + ' ' + dt3 + ' ' + tm3;
point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
marker = new google.maps.Marker({
map: map,
position: point,
icon: CustomMarker,
id: raw,
id2: d
});
bindInfoWindow(marker, map, infoWindow, html);
}
});
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker, html);
position = marker.position;
center: position;
document.getElementById('iRaw1').value = marker.id;
document.getElementById('iRaw2').value = marker.id2;
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
}
}
function getDir(){
directionsDisplay.setMap(map);
var start = myLatLng;
//LatLng created based on the passed arguments
var end = point;
var request = {
origin:start,
destination:end,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(result);
}
});
}

I globally defined every variable necessary for directions:
var map;
var point;
var directionsDisplay;
var directionsService;
var marker;
var myLatLng;
var marklat;
var marklong;
var markers;
var DirLat;
var DirLng;
created a button for the function, and set in content which is visible in the infowindow:
var content = "<button onclick='getDir();'>Get Directions</button>";
Next I created hidden input fields in the map page, and assigned values of Latitude and Longitude of the markers that are clicked.
document.getElementById('iLat').value = marker.getPosition().lat().toFixed(6);
document.getElementById('iLng').value = marker.getPosition().lng().toFixed(6);
The directions function getDir pulls these values for the destination, myLatLng is the current location of the user:
function getDir(){
directionsDisplay.setMap(map);
var start = myLatLng;
var LatDir = document.getElementById('iLat').value;
var LngDir = document.getElementById('iLng').value;
var end = new google.maps.LatLng(LatDir,LngDir);
var request = {
origin:myLatLng,
destination:new google.maps.LatLng(LatDir,LngDir),
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(result);
}
});
}
For the full code, see the updated question's code.

How to submit a zipcode to Google Map API via a form

I am working on this example from Google maps api
here
The map initializes according to the coordinates that are hard coded.My problem is the "addressInput" is not recognized and map just continues to display the same view . I think there is a problem with geocoder expression.
Here is my HTML file
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>ShopRight Store Locator</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var map;
var markers = [];
var infoWindow;
var locationSelect;
function load() {
map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(43.7, -79.4),
zoom: 11,
mapTypeId: 'roadmap',
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}
});
infoWindow = new google.maps.InfoWindow();
locationSelect = document.getElementById("locationSelect");
locationSelect.onchange = function() {
var markerNum = locationSelect.options[locationSelect.selectedIndex].value;
if (markerNum != "none"){
google.maps.event.trigger(markers[markerNum], 'click');
}
};
}
function searchLocations() {
var address = document.getElementById("addressInput").value;
var geocoder = new google.maps.Geocoder();
geocoder.geocode({address: address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
searchLocationsNear(results[0].geometry.location);
} else {
alert(address + ' not found');
}
});
}
function clearLocations() {
infoWindow.close();
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(null);
}
markers.length = 0;
locationSelect.innerHTML = "";
var option = document.createElement("option");
option.value = "none";
option.innerHTML = "See all results:";
locationSelect.appendChild(option);
}
function searchLocationsNear(center) {
clearLocations();
var radius = document.getElementById('radiusSelect').value;
var searchUrl = 'storelocator.php?lat=' + center.lat() + '&lng=' + center.lng() + '&radius=' + radius;
downloadUrl(searchUrl, function(data) {
var xml = parseXml(data);
var markerNodes = xml.documentElement.getElementsByTagName("marker");
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < markerNodes.length; i++) {
var name = markerNodes[i].getAttribute("name");
var address = markerNodes[i].getAttribute("address");
var distance = parseFloat(markerNodes[i].getAttribute("distance"));
var hours = markerNodes[i].getAttribute("hours");
var phone = markerNodes[i].getAttribute("phone");
var latlng = new google.maps.LatLng(
parseFloat(markerNodes[i].getAttribute("lat")),
parseFloat(markerNodes[i].getAttribute("lng")));
createOption(name, distance, i);
createMarker(latlng, name, address, hours, phone);
bounds.extend(latlng);
}
map.fitBounds(bounds);
locationSelect.style.visibility = "visible";
locationSelect.onchange = function() {
var markerNum = locationSelect.options[locationSelect.selectedIndex].value;
google.maps.event.trigger(markers[markerNum], 'click');
};
});
}
function createMarker(latlng, name, address, hours, phone) {
var html = "<b>" + name + "</b> <br/>" + address+"</b> <br/>" + hours+"</b> <br/>" +phone;
var marker = new google.maps.Marker({
map: map,
position: latlng
});
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
markers.push(marker);
}
function createOption(name, distance, num) {
var option = document.createElement("option");
option.value = num;
option.innerHTML = name + "(" + distance.toFixed(1) + ")";
locationSelect.appendChild(option);
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request.responseText, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function parseXml(str) {
if (window.ActiveXObject) {
var doc = new ActiveXObject('Microsoft.XMLDOM');
doc.loadXML(str);
return doc;
} else if (window.DOMParser) {
return (new DOMParser).parseFromString(str, 'text/xml');
}
}
function doNothing() {}
Can someone point me into where to look into that. TIA

Google Map InfoWindow Content Binding

I'm new with Google map. I'm having problem in rebinding the data in my infowindow.
When I close the window using the "x" button in the upper right of the infowindow,
then open it again, all of the updated contents of the infowindow will load again to
its initial state instead of the latest update? What I want is that when I close the
infowindow, the infowindow must have the latest data.
<!DOCTYPE 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>PHP/MySQL & Google Maps Example</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="D:\Program Files\xampp\xampp\htdocs\googletest\progressBar.js"></script>
<script type="text/javascript">
//<![CDATA[
var infoWindow=new Array();
var htmlPrevious=new Array();
var html;
var marker=new Array();
function load() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(7.11425, 124.83758),
zoom: 11,
mapTypeId: 'roadmap'
});
downloadUrl("phpsqlajax_genxml.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
html = new Array(markers.length);
infowindow = new Array(markers.length);
for (var i = 0; i < markers.length; i++) {
infoWindow[i] = new google.maps.InfoWindow;
var sender = markers[i].getAttribute("sender");
var update = markers[i].getAttribute("update_time");
var name = markers[i].getAttribute("name");
var humidity = markers[i].getAttribute("humidity");
var temperature = markers[i].getAttribute("temperature");
var rain = markers[i].getAttribute("rain");
var wind_dir = markers[i].getAttribute("wind_dir");
var wind_speed = markers[i].getAttribute("wind_speed");
var image = markers[i].getAttribute("image");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
html[i] = "<div style='display:block;' width='600' height='300' overflow='hidden'><img style='display:block;' src='"+image+" ' width='300' height='184' /> <br/><b>" + name + "</b> <br/>Sender: " + sender + "<br/>Time: " + update + "<br/> Humidity: " + humidity + "<br/>Temperature: " + temperature + "<br/>Rain: " + rain + "<br/>Wind Direction: " + wind_dir + "<br/>Wind Speed: " + wind_speed + "<div>";
htmlPrevious[i]=html[i];
marker[i] = new google.maps.Marker({
map: map,
position: point,
title: name
});
bindInfoWindow(marker[i], map, infoWindow[i], html[i]);
}//end for loop
});//downloadurl
setInterval("refreshMarker()",1000);
}
function refreshMarker(){
downloadUrl("phpsqlajax_genxml.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var sender = markers[i].getAttribute("sender");
var update = markers[i].getAttribute("update_time");
var name = markers[i].getAttribute("name");
var humidity = markers[i].getAttribute("humidity");
var temperature = markers[i].getAttribute("temperature");
var rain = markers[i].getAttribute("rain");
var wind_dir = markers[i].getAttribute("wind_dir");
var wind_speed = markers[i].getAttribute("wind_speed");
var image = markers[i].getAttribute("image");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
html[i] = "<div style='display:block;' width='600' height='300' overflow='hidden'><img style='display:block;' src='"+image+" ' width='300' height='184' /> <br/><b>" + name + "</b> <br/>Sender: " + sender + "<br/>Time: " + update + "<br/> Humidity: " + humidity + "<br/>Temperature: " + temperature + "<br/>Rain: " + rain + "<br/>Wind Direction: " + wind_dir + "<br/>Wind Speed: " + wind_speed + "<div>";
if (html[i]!=htmlPrevious[i]){
htmlPrevious[i]=html[i];
infoWindow[i].setContent(html[i]);
google.maps.event.addListener(marker, 'click', function() {
infoWindow[i].set("marker",null);
infoWindow[i].close();
bindInfoWindow(marker[i], map, infoWindow[i], html[i]);
infoWindow[i]=infoWindow;
});
}
//infoWindow.open(map, marker);
}
});
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
alert("imhere");
});
}
function closeInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'closeclick', function() {
infoWindow.close();
alert("im here");
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
//]]>
</script>
</head>
<body onload="load()">
<div id="map" style="width: 1330px; height: 610px"></div>
</body>
</html>
Any help will highly appreciated.. :-)

Update your function to be:
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}