javascript - Google Maps with Multiple Information in one marker

Question

I am developing a web application that contains some information about place. That place may have more than one agenda. Can I show more information in one marker, such as stack balloon?

This is my maps

http://petamajelis.org/maps/index.php

This is my data

http://petamajelis.org/maps/ajax2.php

there are some places that have more than one agenda, and I want to show all of that agendas in one marker if the latitude and longitude are same.

this is my code to show marker depend on database, I put it in index.php

function load() {
  var map = new google.maps.Map(document.getElementById("map"), {
    center: new google.maps.LatLng(-6.270293,106.830995),
    zoom: 13,
    mapTypeId: 'roadmap'
  });
  var infoWindow = new google.maps.InfoWindow;

  // Change this depending on the name of your PHP file
  downloadUrl("ajax2.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 type = markers[i].getAttribute("type");
      var materi = markers[i].getAttribute("materi");
      var pemateri = markers[i].getAttribute("pemateri");
  var tanggal = markers[i].getAttribute("tanggal");
  var hari= markers[i].getAttribute("hari");
  var jam= markers[i].getAttribute("jam");
      var point = new google.maps.LatLng(
          parseFloat(markers[i].getAttribute("lat")),
          parseFloat(markers[i].getAttribute("lng")));
      var html = "<b>" + name + "</b> <br/>" + address + "<br/>" +materi+ " : "+pemateri+ "<br/>"+ hari +" "+tanggal+ " Jam : "+jam;
      var icon = customIcons[type] || {};
      var marker = new google.maps.Marker({
        map: map,
        position: point,
        icon: icon.icon,
        shadow: icon.shadow
      });
      bindInfoWindow(marker, map, infoWindow, 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);
}

could i modify that code to show some information if latitude/longitude are same and show it in a balloon above marker?

thanks before

Answer 1

Possible way to achieve it(there may be many ways):

1. create some object at the begin of the callback of downloadUrl()

   var markerContents={};

2. inside the loop where you create the markers populate this object with properties. As name for the properties assign the string-representation of the point(will be returned by LatLng.toString()). Create a variable of this string:

   var markerId = point.toString();

   First you have to check now if this property already exists, when not create it and set the value to an empty array:

   if(!markerContents[markerId]){
      markerContents[markerId] = [];
    } 

   Then, after the line where create the html, push the html into the array:

   markerContents[markerId].push(html);

3. to avoid the creation of multiple markers at the same position, leave the current iteration before you create the marker, when there are more than 1 item inside the array:

   if(markerContents[markerId].length>1){return;}

4. modify the call of bindInfoWindow(); , pass the array as argument instead of html

   bindInfoWindow(marker, map, infoWindow, markerContents[markerId]);

5. Modify the click-listener of the Marker so that he may use the content of the array as InfoWindowContent

    function bindInfoWindow(marker, map, infoWindow, html) {
      google.maps.event.addListener(marker, 'click', function() {
        infoWindow.setContent(html.join('<hr/>'));
        infoWindow.open(map, marker);
      });
    }

There will no longer be multiple markers at the same position, instead there will be 1 marker with the content set to the html of all markers with this position, delimited by a horizontal rule.