边栏Google Maps API v3使用PHP / MYSQL提取数据[关闭]

Question

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