Custom Google Maps API v3 - Javascript Sidebar Cus

2019-07-27 13:18发布

After a lot of work/research/headaches, etc., I've got my "Local Business Directory" w/ Google Maps script working pretty cool.

Now, I'm stuck. There are a couple of things the app needs to do before it's done.

  1. I need to run a query when someone logs on to the site, so that there is some data displayed in the sidebar... A kind of "Some Local Businesses".

  2. I need some sort of filters to show up in a fixed cell/div at the top of the "sidebar" div. For example, sort by name desc/asc... or only show results that meet some sort of other criteria, only restaurants that offer on-line coupons, or only featured businesses, or only new businesses.

Here is my working script so far:

<script src="http://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript" src="js/gmap_markerwithlabel.js"></script>
<script type="text/javascript">
    //<![CDATA[

    google.maps.visualRefresh = true;
    var map;
    var markers = [];
    var infoWindow;
    var myCenter=new google.maps.LatLng(<?=$gmap_center_point?>);

<!-- FUNCTION -->
    function load() {
      map = new google.maps.Map(document.getElementById("map"), {
        center: new google.maps.LatLng(<?=$gmap_center_point?>),
        zoom: 10,
        mapTypeId: 'roadmap',
        mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
        });

        infoWindow = new google.maps.InfoWindow();

<!-- STICK A CUSTOM PIN IN CENTER LOCATION -->
      var center_marker=new google.maps.Marker({
              map:map,
              position:myCenter,
              clickable: true,
              icon:'/images/GHV_map_marker.png'
              });
                    center_marker.info = new google.maps.InfoWindow({
                    content: 'My Location'
                    });
                            google.maps.event.addListener(center_marker, 'click', function() {
                            center_marker.info.open(map, center_marker);
                            });  
                                      center_marker.setMap(map);
    }

<!-- This function does the Search based on AddressInput -->
   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 -->
   function clearLocations() {
     infoWindow.close();
     for (var i = 0; i < markers.length; i++) {
       markers[i].setMap(null);
     }
     markers.length = 0;
   }


<!-- This function queries the Processing File based on criteria set... radius... search term.  etc.-->
   function searchLocationsNear(center) {
     clearLocations();

     var radius = document.getElementById('radiusSelect').value;
     var searchrequest = document.getElementById('search').value;
     var searchUrl = 'search_genxml.php?lat=' + center.lat() + '&lng=' + center.lng() + '&radius=' + radius + '&searchrequest=' + searchrequest;
     downloadUrl(searchUrl, function(data) {
     var xml = parseXml(data);
     var markerNodes = xml.documentElement.getElementsByTagName("marker");
     var sidebar = document.getElementById('sidebar');
     sidebar.innerHTML = '';
     if (markerNodes.length == 0) {
         sidebar.innerHTML = 'No results found.';
         map.setZoom(6);
         map.setCenter(new google.maps.LatLng(<?=$gmap_center_point?>));
         return;
         }
     var bounds = new google.maps.LatLngBounds();


     for (var i = 0; i < markerNodes.length; i++) {

<!-- GRAB THE VARIABLES ATTRIBUTES FROM PROCESSING FILE AND ASSIGN VAR -->
         var name = markerNodes[i].getAttribute("name");
         var address = markerNodes[i].getAttribute("address");
         var profile_link = markerNodes[i].getAttribute("profile_link");
         var featured = markerNodes[i].getAttribute("featured");            
         var coupons = markerNodes[i].getAttribute("coupons");
         var youtube_activate = markerNodes[i].getAttribute("youtube_activate");     
         var additional_photo = markerNodes[i].getAttribute("additional_photo");
         var logo = markerNodes[i].getAttribute("logo");
         var number_count = markerNodes[i].getAttribute("number_count");
         var distance = parseFloat(markerNodes[i].getAttribute("distance"));
         var latlng = new google.maps.LatLng(
              parseFloat(markerNodes[i].getAttribute("lat")),
              parseFloat(markerNodes[i].getAttribute("lng")));

         createSidebarEntry(name, address, distance, i, featured, coupons, youtube_activate, additional_photo, logo, profile_link, number_count);

         createMarker(latlng, name, address, profile_link, number_count, distance);

         bounds.extend(latlng);
         }
         map.fitBounds(bounds);
     });
  }


<!-- This function creates marker and populates the infobubble -->
    function createMarker(latlng, name, address, profile_link, number_count, distance, zoom) {
      var html = "<b>" + name + "</b> <br/>" + address + "<br/><font color=\"red\">Approx. " + distance.toFixed(1) + " miles away</font><br/>"
<!--      html += '<a class="menu" href="javascript: map.setZoom('+zoom+');">Zoom To</a>';  --> 
      html += ' <a class="menu" href="javascript:map.set(streetViewControl, true);">Street View</a>';
      html += ' | '; 
      html += ' <a  class="menu" href="javascript:map.setCenter(new google.maps.LatLng('+latlng.toUrlValue(6)+')); map.setZoom(parseInt(map.getZoom())+2);">Zoom In</a>';
      html += ' | '; 
      html += ' <a  class="menu" href="javascript:map.setCenter(new google.maps.LatLng('+latlng.toUrlValue(6)+')); map.setZoom(parseInt(map.getZoom())-2);">Out </a>';
      html += '<br/><br/>'+ profile_link ; 
      var marker = new MarkerWithLabel({
            map: map,
            position: latlng,
            animation: google.maps.Animation.DROP,

<!-- Label Options Reference http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.9/examples/-->
            labelContent: number_count,
            labelAnchor: new google.maps.Point(8, 36),
            labelClass: "gmap_labels", // the CSS class for the label
            labelInBackground: false
            });
              google.maps.event.addListener(marker, 'click', function() {
              infoWindow.setContent(html);
              infoWindow.open(map, marker);

      });
      markers.push(marker);
   }

<!-- This function . . . -->
    function createSidebarEntry(name, address, distance, num, featured, coupons, youtube_activate, additional_photo, logo, profile_link, number_count) {
      var div = document.createElement("div");
      var html = '<table width=\"100%\" border=\"0\" cellspacing=\"0\" cellpadding=\"5\"><tr><td width=\"20px\" valign=\"top\" align=\"right\">'+ number_count +'</td><td ><b>' + name + '</b> <br/><font color=\"red\">Approx. ' + distance.toFixed(1) + ' miles away.</font><br/>' + address + ' <br/><br/></td></tr></table>';

      div.value = num;
      div.innerHTML = html;
      div.style.cursor = 'pointer';
      div.style.marginBottom = '5px'; 
      sidebar.appendChild(div);

      google.maps.event.addDomListener(div, 'click', function() {
        google.maps.event.trigger(markers[num], 'click');
        });
      google.maps.event.addDomListener(div, 'mouseover', function() {
        div.style.backgroundColor = '#eee';
        });
      google.maps.event.addDomListener(div, 'mouseout', function() {
        div.style.backgroundColor = '#fff';
        });

      return div ;
    }


<!-- This function . . . -->
    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);
    }


<!-- This function . . . -->
    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');
      }
    }


<!-- This function . . . -->
    function doNothing() {}

    //]]>
</script>

0条回答
登录 后发表回答