Sidebar Google Maps API v3 Pulling Data Using PHP/MYSQL [closed] - php

Question

It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.
Closed 11 years ago.
I am trying to build a script that pulls in data from a database using
php/mysql. And I want to create a sidebar with the locations in
my database. Kind of like the example in the link underneath
http://www.geocodezip.com/v3_MW_example_map15c.html
I am able to pull in data and display the locations on my map just
fine ... but the sidebar is not displaying any of my markers I am pretty sure there is a problem with the part of my code that creates the markers.. i'm new to javascript though so could be wrong though. That part of the code can be found on line 36 ... starts off something like
function createMarker(latlng, name, html) {
Here's a link to my script
http://onlineworkplace.info/googlemaps/testing.php
And here is the actual script.
<script type="text/javascript">
var customIcons = {
c: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
u: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
}
};
// this variable will collect the html which will eventually be placed in the select
var select_html = "";
// arrays to hold copies of the markers
// because the function closure trick doesnt work there
var gmarkers = [];
// global "map" variable
var map = null;
// A function to create the marker and set up the event window function i am pretty sure something is not right here
function createMarker(latlng, name, html) {
var ContentString = html;
var markers = new google.maps.Marker({
position: latlng,
map: map,
zIndex: Math.round(latlng.lat()*-100000)<<5
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(ContentString);
infowindow.open(map,marker);
});
// ======= Add the entry to the select box =====
select_html += '<option> ' + name + '<\/option>';
// ==========================================================
// save the info we need to use later
gmarkers.push(markers);
return markers;
}
// ======= This function handles selections from the select box ====
// === If the dummy entry is selected, the info window is closed ==
function handleSelected(opt) {
var i = opt.selectedIndex - 1;
if (i > -1) {
google.maps.event.trigger(gmarkers[i],"click");
}
else {
infowindow.close();
}
}
function load() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(29.760, -95.387),
zoom: 10,
mapTypeId: 'hybrid'
});
var infoWindow = new google.maps.InfoWindow;
// Change this depending on the name of your PHP file
downloadUrl("phpsqlajax_genxml2.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("skatespots");
// ==== first part of the select box ===
select_html = '<select onChange="handleSelected(this)">' +
'<option selected> - Select a location - <\/option>';
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
var confirmed = markers[i].getAttribute("confirmed");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = "<b>" + name + "</b>";
var icon = customIcons[confirmed] || {};
// i think the varmarker bit is not right not here not sure though
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
shadow: icon.shadow
});
bindInfoWindow(marker, map, infoWindow, html);
}
// ===== final part of the select box =====
select_html += '<\/select>';
document.getElementById("selection").innerHTML = select_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() {}
// This Javascript is based on code provided by the
// Community Church Javascript Team
// http://www.bisphamchurch.org.uk/
// http://econym.org.uk/gmap/
// from the v2 tutorial page at:
// http://econym.org.uk/gmap/basic3.htm
Any help or maybe hints as to what is going wrong would be appreciated
Thanks

Answer 1

This answer makes the assumption that by sidebar you mean the select combo box
The original version called
function createMarker(latlng, name, html)
which adds the option to the select box.
You are no longer calling createMarker, but are instead calling
function bindInfoWindow(marker, map, infoWindow, html)
which only adds the 'click' listener, but doesn't do anything else (like adding the option to the select_html variable).
You could just modify your loop:
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
var confirmed = markers[i].getAttribute("confirmed");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = "<b>" + name + "</b>";
var icon = customIcons[confirmed] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
shadow: icon.shadow
});
bindInfoWindow(marker, map, infoWindow, html);
// I have been added so I populate the select combo box.
select_html += '<option> ' + name + '<\/option>';
}

Answer 2

First of all you have inconsistency in createMarker() - first it's 'markers':
var markers = new google.maps.Marker({
position: latlng,
map: map,
zIndex: Math.round(latlng.lat()*-100000)<<5 // btw do you really need this??
});
then 'marker':
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(ContentString);
infowindow.open(map,marker);
});
Then, you redeclare your map variable in load() function's scope:
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(29.760, -95.387),
zoom: 10,
mapTypeId: 'hybrid'
}); // creates another variable in local scope
// instead use global variable, meaning you don't redeclare it (don't use 'var'):
map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(29.760, -95.387),
zoom: 10,
mapTypeId: 'hybrid'
}); // creates another variable in local scope
Next: you again use inconsistent variables for info window:
var infoWindow = new google.maps.InfoWindow; // btw this one should be global like map
// and elsewhere:
function handleSelected(opt) {
var i = opt.selectedIndex - 1;
if (i > -1) {
google.maps.event.trigger(gmarkers[i],"click");
}
else {
infowindow.close();
}
}
And finally you loop markers got with AJAX and create markers in place instead of using createMarker() function, so replace this:
// i think the varmarker bit is not right not here not sure though
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
shadow: icon.shadow
});
bindInfoWindow(marker, map, infoWindow, html);
with:
createMarker(point, name, html, icon);
and forge createMarker definition as you wish to set icon:
function createMarker(latlng, name, html, icon) {
var ContentString = html;
var marker = new google.maps.Marker({
position: latlng,
map: map,
zIndex: Math.round(latlng.lat()*-100000)<<5,
icon: icon.icon,
shadow: icon.shadow
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(ContentString);
infowindow.open(map,marker);
});
// ======= Add the entry to the select box =====
select_html += '<option> ' + name + '</option>';
// ==========================================================
// save the info we need to use later
gmarkers.push(marker);
return marker;
}
Also declare select_html as global variable.