0

サイドバー付きのフュージョン マップを表示するスクリプトをまとめました。

  <script type="text/javascript">
  google.load('visualization', '1', {'packages':['table']});
  var map;
  var markers = [];
  var infoWindow = new google.maps.InfoWindow();

  function initialize() {
    var us = new google.maps.LatLng(38.24676420846342, -94.82073772499997);

    map = new google.maps.Map(document.getElementById('map_canvas'), {
     center: us,
     zoom: 4,
     mapTypeId: google.maps.MapTypeId.ROADMAP
   });


//info window to contain link to map marker Sales Region, rep name, rep contact and contact email 
//sidebar contains rep name and rep contact
    var sql = encodeURIComponent("SELECT 'State - Sales Region', 'Representative Name', 'Representative Contact', 'Contact Email', Lat, Lon FROM 555 ORDER BY 'State - Sales Region'");
    var query = new google.visualization.Query('http://www.google.com/fusiontables/gvizdata?tq=' + sql);

    query.send(getData);
  }

  function getData(response) {
    var dt = response.getDataTable();  

    var side_html = '<table style="border-collapse: collapse" border="1" \
                       cellpadding="5"> \
                       <thead> \
                         <tr style="background-color:#e0e0e0"> \
                           <th>Area</th> \
                           <th>Name</th> \
                         </tr> \
                       </thead> \
                       <tbody>';

    for (var i = 0; i < dt.getNumberOfRows(); i++) {
      var lat = dt.getValue(i,4);
      var lng = dt.getValue(i,5);
      var area = dt.getValue(i,0);
      var name = dt.getValue(i,2);
      var company = dt.getValue(i,1);
      var contact = dt.getValue(i,3);
      var pt = new google.maps.LatLng(lat, lng);
      var html = "<strong>" + area + "</strong><br />" + company + "<br />" + name + "<br /><a href='mailto:" + contact + "'>" + contact + "</a>";

      side_html += '<tr> \
                      <td><a href="javascript:myclick(' + i + ')">' + area + '</a></td> \
                      <td>' + name + '</td> \
                    </tr>';

      createMarker(pt, html);

    }

    side_html += '</tbody> \
                </table>';
    document.getElementById("side_bar").innerHTML = side_html;
  }

//use simple default marker
function createMarker(point,info) {  
  var marker = new google.maps.Marker({
      position: point,
      map: map
     });
    }
    markers.push(marker);

    google.maps.event.addListener(marker, 'click', function() {
      infoWindow.close();
      infoWindow.setContent(info);
      infoWindow.open(map,marker); 
    });

    google.maps.event.addListener(marker, 'onChange', function() {
      infoWindow.close();
      infoWindow.setContent(info);
      infoWindow.open(map,marker); 
    });
  }

  function myclick(num) {
    google.maps.event.trigger(markers[num], "click");
    map.setCenter(markers[num].getPosition());
  }
  </script>

ここで、マーカー表示に条件を追加したいと思います。条件は、以下の表の連絡先名と一致することです。マーカーのスタイルを変更する条件をどこに置くかで行き詰まっています。ありがとう！

var image = "./beachflag_with_shadow.png";
if(contact == "Joe Smith"){
var marker = new google.maps.Marker({
      position: point,
      icon: image,
      map: map
     });     
} else {
  var marker = new google.maps.Marker({
      position: point,
      map: map
     });
    }
4

1 に答える 1

0

以前にこれを試したことがあると思っていましたが、今では問題なく動作します。

変数を createMarker 関数に渡すだけです。

createMarker(pt, html, contact);

    }

    side_html += '</tbody> \
                </table>';
    document.getElementById("side_bar").innerHTML = side_html;
  }

//use simple default marker
function createMarker(point,info,contact) {  
var image = "./beachflag_with_shadow.png";
if(contact == "Joe Smith"){
var marker = new google.maps.Marker({
      position: point,
      icon: image,
      map: map
     });     
} else {
  var marker = new google.maps.Marker({
      position: point,
      map: map
     });
    }
于 2013-02-19T16:32:52.323 に答える