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

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>";
  开发者_JAVA百科    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

---

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>';
}

---

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.