Offset x,y location of D3 markers on Google Map v3

[Chandra Miller]

I am trying to overlay multiple markers at the same lat/long using d3.js on Google Maps.  The data I am trying to display is weather data so I would like the marker to display temp, dewpoint, relative humidity, etc. all at one time.  I need to get the markers to offset from the lat/long point given to each marker .  My map is at http://alert.fcd.maricopa.gov/alert/Google/v3/mobile.html click on datasets and then weather data.  Right now only Dewpoint will display and I believe temp is underneath because I am not getting any errors on my javascript file.  Picture of how I would like the marker to display is at http://alert.fcd.maricopa.gov/alert/Google/image/wxmarker.png.

    function updateWxImage() {
     var reqstamp = Number(new Date());
     var rptDate = " ";
     var strDataset = "";
     var item = $('#date')[0];
     item.style.background = "#ffff00";
     item.style.color = "#000000";
     item.innerHTML = "<strong>...updating dataset...</strong>";
     ClearOverlays();
     var width = 36;
     var height = 12;
     
     // Start D3 Code
     var fill = d3.scale.linear()
      .domain([0.0, 150.0])
      .range(["black", "black"]);
   
     // Load the station data. When the data comes back, create an overlay.
     // Calls currain.php which converts xml to json
     d3.json("./php/currentwx.php", function(jsonData) {
      overlayD3 = new google.maps.OverlayView();
      
   
      var data = jsonData.data;
         
      // Add the container when the overlay is added to the map.
      overlayD3.onAdd = function() {
       var layer = d3.select(this.getPanes().floatPane).append("div")
        .attr("class", "stations")
        .attr("id", "stations");
   
       // Draw each marker as a separate SVG element.
       // We could use a single SVG, but what size would it have
       overlayD3.draw = function() {
        var projection = this.getProjection();
   
        padding = 12;
        
        var marker1 = layer.selectAll("svg")
         .data(d3.entries(data))
         .each(transform) // update existing markers
         .enter().append("svg:svg")
         .each(transform)
         .attr("class", "marker")
         .attr("id", "marker")
         .attr("width", width)
         .attr("height", height)
         .attr("title",  function(d) { return d.value.tempid + ' - ' + d.value.name; })
         .on("click", function(d) { addTempInfoWindow(d); });
   
        
         // Add a rectangle.
         marker1.append("svg:rect")
          .attr("x", 0)
          .attr("y", 0)
          .attr("rx", 4)
          .attr("ry", 4)
          .attr("width", padding*3)
          .attr("height", padding)
          .attr("title",  function(d) { return d.value.tempid + ' - ' + d.value.name; })
          .style("fill", function(d) { return fill(d.value.temp); })
          .style("display", function(d) { if (d.value.temp == 0 || d.value.temp < -90) { return "none"; } else { return "inline"; }});
   
   
         // Add a label.
         marker1.append("svg:text")
          .attr("x", padding*1.5)
          .attr("y", padding*0.85)
          .attr("text-anchor", "middle")
          .attr("font-weight", "bold")
          .attr("font-size", function(d) { if (d.value.temp == 0 || d.value.temp < -90) { return padding*1.05; } else { return padding; }})
          .style("fill", function(d) {
           if (d.value.temp < -90) {
            return "red";
              
           } else {
            return "red";
            
           }
          })
          .text(function(d) {
           if (d.value.temp < -90) {
             return "M";
           } else {
            return d.value.temp;
           }
          });
   
        function transform(d) {
         d = new google.maps.LatLng(d.value.latitude, d.value.longitude);
         d = projection.fromLatLngToDivPixel(d);
         return d3.select(this)
          .style("left", d.x + "px")
          .style("top", d.y + "px");
        }
       };
       
       overlayD3.onRemove = function() {
        var marker = d3.select("#marker").remove();
        var layer = d3.select("#stations").remove();
        
       };
       
      };
      overlayD3.setMap(map);
   
   
      overlayD3.onAdd = function() {
       var layer = d3.select(this.getPanes().floatPane).append("div")
        .attr("class", "stations")
        .attr("id", "stations");
   
       // Draw each marker as a separate SVG element.
       // We could use a single SVG, but what size would it have
       overlayD3.draw = function() {
        var projection = this.getProjection();
   
        padding = 12;    
        
        var marker2 = layer.selectAll("svg")
         .data(d3.entries(data))
         .each(transform) // update existing markers
         .enter().append("svg:svg")
         .each(transform)
         .attr("class", "marker2")
         .attr("id", "marker2")
         .attr("width", width)
         .attr("height", height)
         .attr("title",  function(d) { return d.value.dewpointid + ' - ' + d.value.name; })
         .on("click", function(d) { addDewpointInfoWindow(d); });
   
        
         // Add a rectangle.
         marker2.append("svg:rect")
          .attr("x", 0)
          .attr("y", 0)
          .attr("rx", 4)
          .attr("ry", 4)
          .attr("width", padding*3)
          .attr("height", padding)
          .attr("title",  function(d) { return d.value.dewpointid + ' - ' + d.value.name; })
          .style("fill", function(d) { return fill(d.value.dewpoint); })
          .style("display", function(d) { if (d.value.dewpoint == 0 || d.value.dewpoint < -90) { return "none"; } else { return "inline"; }});
   
   
         // Add a label.
         marker2.append("svg:text")
          .attr("x", padding*1.5)
          .attr("y", padding*0.85)
          .attr("text-anchor", "middle")
          .attr("font-weight", "bold")
          .attr("font-size", function(d) { if (d.value.dewpoint == 0 || d.value.dewpoint < -90) { return padding*1.05; } else { return padding; }})
          .style("fill", function(d) {
           if (d.value.dewpoint < -90) {
            return "red";
              
           } else {
            return "turquoise";
            
           }
          })
          .text(function(d) {
           if (d.value.dewpoint < -90) {
             return "M";
           } else {
            return d.value.dewpoint;
           }
          });
   
        function transform(d) {
         d = new google.maps.LatLng(d.value.latitude, d.value.longitude);
         d = projection.fromLatLngToDivPixel(d);
         return d3.select(this)
          .style("left", d.x + "px")
          .style("top", d.y + "px");
        }
       };
       
       overlayD3.onRemove = function() {
        var marker2 = d3.select("#marker2").remove();
        var layer = d3.select("#stations").remove();
        
       };
       
      };
      overlayD3.setMap(map);
   
      
      // Get the date that the report was created from the meta object in the json file
      var meta = jsonData.meta;
      var rptDate = meta.created;
      item = $('#date')[0];
      item.style.background = "#9CF";
      item.style.color = "black";
      $('#date')[0].innerHTML = "Data: " + rptDate + strDataset + "(Weather)";
      
     });
    }

I think that I need to edit this section but everything I have tried is unsuccessful.

    function transform(d) {
     d = new google.maps.LatLng(d.value.latitude, d.value.longitude);
     d = projection.fromLatLngToDivPixel(d);
     return d3.select(this)
      .style("left", d.x + "px")
      .style("top", d.y + "px");
    }
   };

[chris marx]

links appear to be broken?

[Chandra Miller]

Chris Marx - The links were broken over the weekend due to a network update within the county I work for.  Everything has been updated and the links do work now.

[chris marx]

This is what I'm seeing on the weather layer, this looks like the sample you were trying to create? Or are you wanting the table markers to never overlap? Perhaps you should investigate something like spiderify? https://github.com/jawj/OverlappingMarkerSpiderfier/

[Chandra Miller]

http://alert.fcd.maricopa.gov/alert/Google/v3/mobile_test.html. Look at the weather layer on the link I posted above. Had to keep the original one in the other link cause the county is officially using it now. The link above shows the marker issue I am having. I will check the spidery link you posted.

[Chandra Miller]

I do not want the markers to overlay. 

[en4ce]

something like this:

icon =  new google.maps.MarkerImage(markerIcon,new google.maps.Size(37,37),null,new google.maps.Point(0, 32));

var marker = new google.maps.Marker({

[.....]

icon:icon

});

[geoco...@gmail.com]

On Tuesday, July 9, 2013 7:51:51 AM UTC-7, en4ce wrote:

something like this:

icon =  new google.maps.MarkerImage(markerIcon,new google.maps.Size(37,37),null,new google.maps.Point(0, 32));

MarkerImage is deprecated in favor of Icon

Conversion described here:
https://developers.google.com/maps/documentation/javascript/overlays#ComplexIcons

Icon object described here:
https://developers.google.com/maps/documentation/javascript/reference#Icon

  -- Larry