SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Mentor silver trophy
    Rubble's Avatar
    Join Date
    Dec 2005
    Location
    Cambridge, England
    Posts
    2,410
    Mentioned
    81 Post(s)
    Tagged
    3 Thread(s)

    Googlemaps V3 and spiderfier

    I am creating a google map to show user locations; for privacy I am not using the actual address of the user but the nearest town.
    I have used some code from Google's website allowing me to put the pin data into a database and extract it into an xml file. I chose this method as the XML file contains a lot more information than just the pins.
    I have now created myself a problem as if two users pick the same town for their location one icon will be behind another and will not be displayed. I could offset the pin slightly so it shows up which is one option but this will mean I have more than one lat and lng for each town.
    Google has some Markercluster code but it will not work if two or more flags are overlapping.

    I found Some code called spiderfy but as with everything it is not so simple as the tutorial is not for the code I have ( I have already added some custom flag code ) and it is more suited for somebody who has some JavaScript experience which I have not.
    I have had a go at inserting the code but to be honest I have no idea what I am doing; could somebody give me some direction? For instance I do not even know where I am supposed to put the Spiderfier code - keep it in its own folder; put the code into the same folder as the map etc.

    This is my map code so far and the link above will take you to the Spiderfier page on github.

    Code:
        //<![CDATA[
    
        var customIcons = {
          DBR: {
            icon: 'icons/DBR.png'
          },
    	  MFR: {
            icon: 'icons/MFR.png'
          }
        };
    
        function load() {
          var map = new google.maps.Map(document.getElementById("map"), {
            center: new google.maps.LatLng(52.086597,-0.264096),
            zoom: 10,
            mapTypeId: 'roadmap'
          });
          var infoWindow = new google.maps.InfoWindow;
    
          // Change this depending on the name of your PHP file
          downloadUrl("phpsqlajax_genxml.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 photo = markers[i].getAttribute("photo");
    		  var completed = markers[i].getAttribute("completed");
    		  var referance = markers[i].getAttribute("referance");
              var point = new google.maps.LatLng(
                  parseFloat(markers[i].getAttribute("lat")),
                  parseFloat(markers[i].getAttribute("lng")));
              var contentString = '<div class="info-window"><b>' + name + '</b> completed this in ' + completed + 
    		  '<br/><br/><a href="large/' + photo + '.jpg"><img src="thumb/' + photo + 
    		  '.jpg" alt="Click for a larger version" title="Click for a larger version"><a><br> Referance number: ' + referance + '</div>';
              var icon = customIcons[model] || {};
              var marker = new google.maps.Marker({
                map: map,
                position: point,
                icon: icon.icon
              });
              bindInfoWindow(marker, map, infoWindow, contentString);
            }
          });
        }
    
        function bindInfoWindow(marker, map, infoWindow, contentString) {
          google.maps.event.addListener(marker, 'click', function() {
            infoWindow.setContent(contentString);
            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() {}
    
        //]]>

  2. #2
    SitePoint Wizard lorenw's Avatar
    Join Date
    Feb 2005
    Location
    was rainy Oregon now sunny Florida
    Posts
    1,101
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I think that no matter what you do, you will have problems.
    What I would do is substr() on the last number(s) and replace it with a random number.
    That way you would not be revealing the actual location and less chance of overlap.
    Just a thought.
    What I lack in acuracy I make up for in misteaks

  3. #3
    SitePoint Mentor silver trophy
    Rubble's Avatar
    Join Date
    Dec 2005
    Location
    Cambridge, England
    Posts
    2,410
    Mentioned
    81 Post(s)
    Tagged
    3 Thread(s)
    That was my initial thought but I am using a JavaScript auto complete to populate the form and will then have multiple towns with the same name.

    It could work as I could use $sql = "SELECT DISTINCT town FROM location ORDER BY town ASC ";
    But then again if somebody uses Cambridge for the UK and I know there are other Cambridges around the world. I would have to change my form page so I picked the country first, but this would need a page reload etc. More thought required and I will wait and see if any other ideas come up. I have plenty of other work to keep me busy with database querys for some statistics!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •