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
});
Am Freitag, 10. Mai 2013 01:30:00 UTC+2 schrieb 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*<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");
> }
> };
>
--
You received this message because you are subscribed to the Google Groups
"Google Maps JavaScript API v3" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to google-maps-js-api-v3+unsubscr...@googlegroups.com.
To post to this group, send email to google-maps-js-api-v3@googlegroups.com.
Visit this group at http://groups.google.com/group/google-maps-js-api-v3.
For more options, visit https://groups.google.com/groups/opt_out.
