1

I have a fully-functioning Google Maps V3 map that works fine the way it is. However, I dislike InfoWindows because they take up too much map space when displaying the info. My solution around that is to place information in a sidebar to the right of the map. The information inside the InfoWindow would be transferred to a in that sidebar using an event to first clear existing data and then repopulate it with the current data.

I'm not sure how to take data from inside the map and bring it outside, nor how to use an event inside to move that that data outside on a 'click'.

  var infoWindow = new google.maps.InfoWindow;

  // Change this depending on the name of your PHP file
  downloadUrl("tests/cfdstationsxml.php", function(data) {
    var xml = data.responseXML;
    var markers = xml.documentElement.getElementsByTagName("marker");
    for (var i = 0; i < markers.length; i++) {
      var name = markers[i].getAttribute("name");
      var address = markers[i].getAttribute("address");
      var city = markers[i].getAttribute("city");
      var state = markers[i].getAttribute("state");
      var zip = markers[i].getAttribute("zip");
      var engine = markers[i].getAttribute("engine");
      var truck = markers[i].getAttribute("truck");
      var ambulance = markers[i].getAttribute("ambulance");
      var special_units = markers[i].getAttribute("special_units");
      var battalion = markers[i].getAttribute("battalion");
      var district = markers[i].getAttribute("district");
      var office = markers[i].getAttribute("office");
      var point = new google.maps.LatLng(
          parseFloat(markers[i].getAttribute("lat")),
          parseFloat(markers[i].getAttribute("lng")));
      var html = "<div id='info' style='overflow:hidden;line-height:15px;color:black;height:200px;width:225px;'><span style='font-weight:500;text-decoration:underline;font-size:13px;'>" + name + "</span><br><span style='font-size:10px;'>" + address + "<br>" + city + ", " + state + " " + zip + "</span><br><table style='color:black;font-size:12;'><tr><td>Engine:</td><td>" + engine + "</td></tr><tr><td>Truck:</td><td>" + truck + "</td></tr><tr><td>Ambulance:</td><td>" + ambulance + "</td></tr><tr><td>Special Units:</td><td>" + special_units + "</td></tr><tr><td>Battalion:</td><td>" + battalion + "</td></tr><tr><td>District:</td><td>" + district + "</td><tr><td>Office:</td><td>" + office + "</td></tr></tr></table></div>";
      var icon = 'http://www.radioman911.com/images/9px_marker.png'; // anywhere from 3px_marker.png to 8px_marker.png
      var marker = new google.maps.Marker({
        map: map,
        position: point,
        icon: icon,
        title: name,
      });
      bindInfoWindow(marker, map, infoWindow, html);
    }
  });
}
function bindInfoWindow(marker, map, infoWindow, html) {
  google.maps.event.addListener(marker, 'click', function() {
    $("#info").appendTo("#sidebar");  
    //infoWindow.setContent(lmth);
    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() {}

ANY help at all would be much appreciated - this has been driving me nuts on and off for a month!!

Tim

Tim
  • 43
  • 2
  • 13
  • Just put the information in the sidebar div on the click event (rather than in the infoWindow): http://www.geocodezip.com/v3_GoogleEx_layer-kml_world_countries_simple.html – geocodezip Oct 06 '13 at 05:41
  • I'm afraid I am a bit of a JS noob... Conceptually, I understand your explanation but feel really dumb because after looking at your example, I'm totally confused when trying to apply it to mine... – Tim Oct 06 '13 at 09:17
  • What is the id of your sidebar div? Instead of opening the InfoWindow, do this in the marker click handler `document.getElementById('id of your sidebar div').innerHTML = html;` – geocodezip Oct 06 '13 at 17:39
  • This is what I have: http://tinyurl.com/mb8jcsk – Tim Oct 06 '13 at 17:56
  • You have 2 javascript errors on that page: `Uncaught SyntaxError: Unexpected token - customIcons.js:2`, `GET http://radioman911.com/scripts/jquery-1.10.1.min.map 404 (Not Found) /scripts/jquery-1.10.1.min.map:1`, and the call to bindInfoWindow is commented out. – geocodezip Oct 06 '13 at 18:44
  • added a working example to my answer. – geocodezip Oct 06 '13 at 20:52

1 Answers1

0

This should work for the correct value of 'id of your sidebar div';

function bindInfoWindow(marker, map, infoWindow, html) {
  google.maps.event.addListener(marker, 'click', function() {
   document.getElementById('id of your sidebar div').innerHTML = html;
  });
}

working example

geocodezip
  • 158,664
  • 13
  • 220
  • 245