I've followed the PHP/MYSQL tutorial on Google Maps found here.
I'd like the markers to be updated from the database every 5 seconds or so.
It's my understanding I need to use Ajax to periodicity update the markers, but I'm struggling to understand where to add the function and where to use setTimeout() etc
All the other examples I've found don't really explain what's going on, some helpful guidance would be terrific!
This is my code (Same as Google example with some var changes):
function load() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(37.80815648152641, 140.95355987548828),
zoom: 13,
mapTypeId: 'roadmap'
});
var infoWindow = new google.maps.InfoWindow;
// Change this depending on the name of your PHP file
downloadUrl("nwmxml.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var host = markers[i].getAttribute("host");
var type = markers[i].getAttribute("active");
var lastupdate = markers[i].getAttribute("lastupdate");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = "<b>" + "Host: </b>" + host + "<br>" + "<b>Last Updated: </b>" + lastupdate + "<br>";
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
shadow: icon.shadow
});
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() {}
I hope somebody can help me!
Please note I have not tested this as I do not have a db with xml handy
First of all you need to split your load() function into a function that initializes the map & loads the markers on domready and a function that you will use later to process the xml & update the map with. This needs to be done so you do not reinitialize the map on every load.
Secondly you need to decide what to do with markers that are already drawn on the map. For that purpose you need to add them to an array as you add them to the map. On second update you have a choice to either redraw the markers (rebuild the array) or simply update the existing array. My example shows the scenario where you simply clear the old markers from the screen (which is simpler).
//global array to store our markers
var markersArray = [];
var map;
function load() {
map = new google.maps.Map(document.getElementById("map"), {
center : new google.maps.LatLng(37.80815648152641, 140.95355987548828),
zoom : 13,
mapTypeId : 'roadmap'
});
var infoWindow = new google.maps.InfoWindow;
// your first call to get & process inital data
downloadUrl("nwmxml.php", processXML);
}
function processXML(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
//clear markers before you start drawing new ones
resetMarkers(markersArray)
for(var i = 0; i < markers.length; i++) {
var host = markers[i].getAttribute("host");
var type = markers[i].getAttribute("active");
var lastupdate = markers[i].getAttribute("lastupdate");
var point = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng")));
var html = "<b>" + "Host: </b>" + host + "<br>" + "<b>Last Updated: </b>" + lastupdate + "<br>";
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map : map,
position : point,
icon : icon.icon,
shadow : icon.shadow
});
//store marker object in a new array
markersArray.push(marker);
bindInfoWindow(marker, map, infoWindow, html);
}
// set timeout after you finished processing & displaying the first lot of markers. Rember that requests on the server can take some time to complete. SO you want to make another one
// only when the first one is completed.
setTimeout(function() {
downloadUrl("nwmxml.php", processXML);
}, 5000);
}
//clear existing markers from the map
function resetMarkers(arr){
for (var i=0;i<arr.length; i++){
arr[i].setMap(null);
}
//reset the main marker array for the next call
arr=[];
}
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);
}
setInterval(function() {
downloadUrl("conection/cargar_tecnicos.php", function(data) {
var xml = data.responseXML;
markers = xml.documentElement.getElementsByTagName("marker");
removeAllMarkers();
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var fecha = markers[i].getAttribute("fecha");
var id_android = markers[i].getAttribute("id_android");
var celular = markers[i].getAttribute("celular");
var id = markers[i].getAttribute("id");
var logo = markers[i].getAttribute("logo");
var type = markers[i].getAttribute("type");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = "<div class='infowindow'>"
+"<br/><div style='text-align:center;'><img src="+logo+"><br/>"
+"<b>" + name + "</b></div><br/>"
+"<br/><label><b>Celular:</b></label>" + celular+""
+"<br/><label><b>Id Android:</b></label>" + id_android+""
+"<br/><label><b>Fecha y Hora:</b></label>" + fecha+""
+"<br/><br/><div style='text-align:center;'><a><input style=';' id='pop' type='image' value='"+id+"' class='ASD' img src='img/vermas.png' title='Detalles'/></a></div></div>";
var icon = customIcons[type] || {};
marker[i] = new google.maps.Marker({
position: point,
icon: icon.icon,
shadow: icon.shadow,
title:name
});
openInfoWindow(marker[i], map, infoWindow, html);
marker[i].setMap(map);
}
});
},10000);
}
function removeAllMarkers(){// removes all markers from map
for( var i = 0; i < marker.length; i++ ){
marker[i].setMap(null);
}
}
Related
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 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.
My javascript plots different points on a Google maps map after retrieving the lat long etc. from my xml file. However, when a marker is clicked, it is supposed to show an info window with the location name (which it does). The problem is that the function stoptimes() which is called to get the times for the bus stop clicked, is not being called. I don't know why this is. I have used syntax validators to check it and it reports no error message. Any ideas as to what it could be?
function stoptimes(stop) {
downloadiv("./times.php?stop=" + stop, function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("weather");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("arrival");
document.getElementById("h2").innerHTML = name;
}
});
}
function downloadiv(url, callback) {
var requesta = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
requesta.onreadystatechange = function() {
if (requesta.readyState == 4) {
requesta.onreadystatechange = donada;
callback(requesta, requesta.status);
}
};
requesta.open('GET', url, true);
requesta.send(null);
}
function donada() {}
function load() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(53.5, -8),
zoom: 7,
});
var infoWindow = new google.maps.InfoWindow;
geocoder = new google.maps.Geocoder();
// Change this depending on the name of your PHP file
downloadUrl("stop-locations.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var location = markers[i].getAttribute("name");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var lat=markers[i].getAttribute("lat");
var lng=markers[i].getAttribute("lng");
var html = "<b>" + name + "</b> <br/>";
var stopid = markers[i].getAttribute("stopid");
var marker = new google.maps.Marker({
position:point,
map: map
});
bindInfoWindow(marker, map, infoWindow, html, stopid);
}
});
}
function bindInfoWindow(marker, map, infoWindow, html, stopid) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
stoptimes(stopid);
});
}
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() {}
None of your functions is being called so your code isn't doing anything.
I think you forgot to call bindInfoWindow
Do you call load() anywhere in your code?
Did you mean load() to be onload(), as in window.onload?
I need fetch the new position from json file which will be updated at regualr intervals in order to update it on the map without reloading the whole page repeatedly. How can I do without using Ajax
if (GBrowserIsCompatible()) {
//==add controls
var map = new GMap(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(-29.870879, 30.977258),15);
var htmls = [];
var i = 0;
//create marker and set up infoWindow
function createMarker(point,ID,name) {
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(ID+"<br/>Name: " +name);
});
return marker;
}
process_Data = function(doc) {
//parse json file
var jsonData = eval('(' + doc + ')');
// ======== Plots the markers on Google Maps============
for (var i=0; i<jsonData.markers.length; i++) {
var point = new GLatLng(jsonData.markers[i].lat, jsonData.markers[i].lng);
var marker = createMarker(point,jsonData.markers[i].ID,jsonData.markers[i].name);
map.addOverlay(marker);
}
}
GDownloadUrl("points.json", process_Data);
}
var marker;
// every 10 seconds
setInterval(updateMarker,10000);
function updateMarker() {
$.post('/path/to/server/getPosition',{}, function(json) {
var LatLng = new google.maps.LatLng(json.latitude, json.longitude);
marker.setPosition(LatLng);
});
}
I can't seem to get my head around this problem:
I've got a map with (a lot of) markers (companies) that come from a generated XML file. Below the map, I want to show a (non-JavaScript-generated) list of all the companies that are displayed on the map. When I would click a company in the list, the map would pan to that specific marker and open an infoWindow. The thing is that I want the map and the list to be two separate things...
What would be the right way to tackle this problem? Thanks! Important is that all markerinfo is dynamic...
function initialize_member_map(lang) {
var map = new google.maps.Map(document.getElementById("large-map-canvas"), {
center: new google.maps.LatLng(50.85034, 4.35171),
zoom: 13,
mapTypeId: 'roadmap'
});
var infoWindow = new google.maps.InfoWindow;
downloadUrl("/ajax/member-xml-output.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < markers.length; i++) {
var company = markers[i].getAttribute("company");
var address = markers[i].getAttribute("address");
var type = markers[i].getAttribute("type");
var uid = markers[i].getAttribute("uid"); // Primary key of company table in MySQL
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = "<b>" + company + "</b> <br/>" + address;
bounds.extend(point);
var marker = new google.maps.Marker({
map: map,
position: point,
uid: uid // Some experiments, wanted to use this to target specific markers...
});
bindInfoWindow(marker, map, infoWindow, html);
}
map.setCenter(bounds.getCenter());
map.fitBounds(bounds);
});
}
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() {}
Following the suggestions by Michal, I've tried the following, but am encountering two problems: my console tells me markers[index].getPosition is not a function and the first item in my list shows to be undefined. Can you please help?
//JavaScript Document
var map;
var markers = new Array();
var company_list;
function initialize_member_map(lang) {
map = new google.maps.Map(document.getElementById("large-map-canvas"), {
center: new google.maps.LatLng(50.85034, 4.35171),
zoom: 13,
mapTypeId: 'roadmap'
});
var infoWindow = new google.maps.InfoWindow;
// Change this depending on the name of your PHP file
downloadUrl("/ajax/member-xml-output.php?country=BE", function(data) {
var xml = data.responseXML;
markers = xml.documentElement.getElementsByTagName("marker");
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < markers.length; i++) {
var company = markers[i].getAttribute("company");
var address = markers[i].getAttribute("address");
var type = markers[i].getAttribute("type");
var uid = markers[i].getAttribute("uid");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = "<b>" + company + "</b> <br/>" + address;
bounds.extend(point);
var marker = new google.maps.Marker({
map: map,
position: point,
uid: uid
});
bindInfoWindow(marker, map, infoWindow, html);
company_list += "<div onclick=scrollToMarker(" + i + ")>"+company+"</div>";
}
map.setCenter(bounds.getCenter());
map.fitBounds(bounds);
//display company data in html
document.getElementById("company_list").innerHTML = company_list;
});
}
function scrollToMarker(index) {
map.panTo(markers[index].getPosition());
}
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(){
}
You are on the right track. You just need to create a separate global array for your Marker objects and push all created markers to this array. When you write out all your company data to html include a call with the index of the marker executed on click. Below is an example code. I used JSON as my data structure to hold company info instead of XML.
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=yes" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps Scroll to Marker</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width: 900px;height: 600px;"></div>
<div id="companies"></div>
<script type="text/javascript">
var map;
//JSON of company data - equivalent of your XML
companies = {
"data": [
{
"name": "Company 1",
"lat": 42.166,
"lng": -87.848
},
{
"name": "Company 2",
"lat": 41.8358,
"lng": -87.7128
},
{
"name": "Company 3",
"lat": 41.463,
"lng": -88.870
},
{"name":"Company 4",
"lat":41.809, "lng":-87.790}
]
}
//we will use this to store google map Marker objects
var markers=new Array();
function initialize() {
var chicago = new google.maps.LatLng(41.875696,-87.624207);
var myOptions = {
zoom: 9,
center: chicago,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
listCompanies();
}
function listCompanies() {
html = ""
//loop through all companies
for (i=0;i<companies.data.length;i++) {
//get the maker postion
lat = companies.data[i].lat
lng = companies.data[i].lng
//add google maps marker
marker = new google.maps.Marker({
map:map,
position: new google.maps.LatLng(lat,lng),
title: companies.data[i].name
})
markers.push(marker);
html += "<div onclick=scrollToMarker(" + i + ")>"+companies.data[i].name+"</div>";
}
//display company data in html
document.getElementById("companies").innerHTML =html;
}
function scrollToMarker(index) {
map.panTo(markers[index].getPosition());
}
</script>
</body>
</html>
Ok I added another solution for you - uising your code. This one uses your bindInfWindow function to bind the DOM (HTML) click event to open info window and scroll to marker. Please note that because you are loading companies dynamically the divs (or some other tags) that hold their names and ids must exist in the DOM BEFORE you start binding events to it - so the first function you need to execute is the one that renders companies HTML (not the map init). Please note I have not tested this one as I do not have your data..
//you must write out company divs first
<body onload="showCompanies()">
<script>
//JavaScript Document
var map;
//this is your text data
var markers = new Array();
//you need to create your company list first as we will be binding dom events to it so it must exist before marekrs are initialized
function showCompanies() {
downloadUrl("/ajax/member-xml-output.php?country=BE", function(data) {
var xml = data.responseXML;
markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var company = markers[i].getAttribute("company");
markerId = "id_"+i;
company_list += "<div id="+markerId+">"+company+"</div>";
}
//display company data in html
document.getElementById("company_list").innerHTML = company_list;
//now you are ready to initialize map
initialize_member_map("lang")
});
}
function initialize_member_map(lang) {
map = new google.maps.Map(document.getElementById("large-map-canvas"), {
center: new google.maps.LatLng(50.85034, 4.35171),
zoom: 13,
mapTypeId: 'roadmap'
});
var xml = data.responseXML;
var bounds = new google.maps.LatLngBounds();
//your company data was read in and is ready to be mapped
for (var i = 0; i < markers.length; i++) {
var infoWindow = new google.maps.InfoWindow;
var company = markers[i].getAttribute("company");
var address = markers[i].getAttribute("address");
var type = markers[i].getAttribute("type");
var uid = markers[i].getAttribute("uid");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = "<b>" + company + "</b> <br/>" + address;
bounds.extend(point);
var marker = new google.maps.Marker({
map: map,
position: point,
uid: uid
});
//add the new marker object to the gMarkers array
markerId = "id_"+i;
bindInfoWindow(marker, map, infoWindow, html,markerId);
}
map.setCenter(bounds.getCenter());
map.fitBounds(bounds);
}
function scrollToMarker(index) {
map.panTo(markers[index].getPosition());
}
function bindInfoWindow(marker, map, infoWindow, html, markerId) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
//bind onlcick events to the div or other object in html
markerObj = document.getElementById(markerId);
//you can create DOM event listeners for the map
google.maps.event.addDomListener(markerObj, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
map.panTo(marker.getPosition());
});
}
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>
since i cannot remove this answer, I decided to add some notes!
if your xml format is similar to this: http://www.w3schools.com/dom/books.xml
you may access author nodeValue with following lines.
markers = xml.documentElement.getElementsByTagName("book");
for (var i = 0; i < markers.length; i++) {
authors = markers[i].getElementsByTagName('author')[0].innerHTML;
}
hope it helps someone :)