<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs title="My Simple Map" 
             description="A converted maps api example"
             author="Your name"
             author_email="your-email@google.com"
             height="150">
  <Require feature="sharedmap"/>

</ModulePrefs>

<Content type="html">
<![CDATA[
    Address: <input type="text" id="addressInput"/>
    <br/>  
    Radius: <select id="radiusSelect">
      <option value="25" selected>25</option>
      <option value="100">100</option>

      <option value="200">200</option>
    </select>
    <br/>
    <input type="button" onclick="searchLocations()" value="Search Locations"/>
    <br/>    
    <br/>
    <div id="sidebar" style="overflow: auto; height: 400px; font-size: 11px; color: #000"></div>

<script>
    var map;
    var geocoder;

    geocoder = new GClientGeocoder();
    map = new GMap2();
    map.setCenter(new GLatLng(40, -100), 4);

   function searchLocations() {
     var address = document.getElementById('addressInput').value;
     geocoder.getLatLngAsync(address, function(latlng) {
       if (!latlng) {
         alert(address + ' not found');
       } else {
         searchLocationsNear(latlng);
       }
     });
   }

   function searchLocationsNear(center) {
     var radius = document.getElementById('radiusSelect').value;
     var searchUrl = 'http://imagine-it.org/storelocator/phpsqlsearch_genxml.php?lat=' + center.lat() + '&lng=' + center.lng() + '&radius=' + radius;
     _IG_FetchXmlContent(searchUrl, function(xml) {
       var markers = xml.documentElement.getElementsByTagName('marker');
       map.clearOverlays();

       var sidebar = document.getElementById('sidebar');
       sidebar.innerHTML = '';
       if (markers.length == 0) {
         sidebar.innerHTML = 'No results found.';
         map.setCenter(new GLatLng(40, -100), 4);
         return;
       }

       var bounds = new GLatLngBounds();
       for (var i = 0; i < markers.length; i++) {
         var name = markers[i].getAttribute('name');
         var address = markers[i].getAttribute('address');
         var distance = parseFloat(markers[i].getAttribute('distance'));
         var point = new GLatLng(parseFloat(markers[i].getAttribute('lat')),
                                 parseFloat(markers[i].getAttribute('lng')));
         
         var marker = createMarker(point, name, address);
         map.addOverlay(marker);
         var sidebarEntry = createSidebarEntry(marker, name, address, distance);
         sidebar.appendChild(sidebarEntry);
         bounds.extend(point);
       }
       map.getBoundsZoomLevelAsync(bounds, function(zoom) {
         map.setCenter(bounds.getCenter(), zoom);
       });
     });
   }

    function createMarker(point, name, address) {
      var marker = new GMarker(point);
      var html = '<b>' + name + '</b> <br/>' + address;
      GEvent.addListener(marker, 'click', function() {
        marker.openInfoWindowHtml(html);
      });
      return marker;
    }

    function createSidebarEntry(marker, name, address, distance) {
      var div = document.createElement('div');
      var html = '<b>' + name + '</b> (' + distance.toFixed(1) + ')<br/>' + address;
      div.innerHTML = html;
      div.style.cursor = 'pointer';
      div.style.marginBottom = '5px'; 
      GEvent.addDomListener(div, 'click', function() {
        GEvent.trigger(marker, 'click');
      });
      GEvent.addDomListener(div, 'mouseover', function() {
        div.style.backgroundColor = '#eee';
      });
      GEvent.addDomListener(div, 'mouseout', function() {
        div.style.backgroundColor = '#fff';
      });
      return div;
    }
  </script>
]]>
</Content>
</Module>

