GoogleマップJavascript API - 条件付きマーカー

-1

現在、近くのカフェを見つけることができるウェブアプリを開発中です。私は、カフェが開いているか閉じているかをユーザに知らせる機能性を追加する過程にあり、この情報を情報ウィンドウに現れるようにうまく追加しました。GoogleマップJavascript API - 条件付きマーカー

ユーザーの利便性向上のために、カフェのオープン状態によってマーカーの色が変わるように地図を設定したいと考えています。グリーンマーカー=オープンと赤いマーカーは=ここ

が、私は条件文に特異的なマーカーsvgsに追加しようとしている私は、マーカー/情報ウィンドウの詳細については、一緒

function createMarker(place) { 
    var marker = new google.maps.Marker({ 
     map: map, 
     icon: 'img/greenmarker.svg', 
     position: place.geometry.location 
    }); 
    var request = { 
     reference: place.reference 
    }; 
    google.maps.event.addListener(marker, 'click', function() { 
     service.getDetails(request, function (place, status) { 
      var open; 
      if (place.opening_hours.open_now === true) { 
       open = "We are Open"; 
      } else { 
       open = "We are Closed"; 
      }; 
      if (status === google.maps.places.PlacesServiceStatus.OK) { 
       var contentStr = '<h5>' + place.name + '</h5><p>' + place.formatted_address; 
       if (!!place.opening_hours) 
        contentStr += '<br>' + open; 
       console.log(place); 
       if (!!place.formatted_phone_number) 
        contentStr += '<br>' + place.formatted_phone_number; 
       if (!!place.website) 
        contentStr += '<br><a target="_blank" href="' + place.website + '">' + place.website + '</a></p>'; 

       infoWindow.setContent(contentStr); 
       infoWindow.open(map, marker); 
      } else { 
       var contentStr = "<h5>No Result, status=" + status + "</h5>"; 
       infoWindow.setContent(contentStr); 
       infoWindow.open(map, marker); 
      } 
     }); 
    }); 
}

を入れている現在のスクリプトで閉じられますが、これはうまくいきませんでした

var marker; 
     var request = { 
      reference: place.reference 
     }; 

     google.maps.event.addListener(marker, 'click', function() { 
      service.getDetails(request, function (place, status) { 
       var open; 
       if (place.opening_hours.open_now === true) { 
        open = "We are Open"; 
        marker = new google.maps.Marker({ 
         map: map, 
         icon: 'img/greenmarker.svg', 
         position: place.geometry.location 
        }); 
       } else { 
        open = "We are Closed"; 
        marker = new google.maps.Marker({ 
         map: map, 
         icon: 'img/redmarker.svg', 
         position: place.geometry.location 
        }); 
       };

これについてのお手伝いをさせていただきます。

出典

2017-02-02 xj-nny

ユーザーがクリックしたときにのみマーカーの色を変更しますか？ – duncan

正確には機能しないものはありますか？ – MrUpsidown

@duncanいいえ、Google place APIから取得した営業時間情報に基づいて、マーカーの色を変更したいとします。 –

[OK]をクリックします。ここでは、実際に行っている作業のバージョンを確認します。 createMarker関数を別のplaceIdで複数回呼び出す必要があります

<!DOCTYPE html> 
<html> 
<head> 
<title></title> 

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<style type="text/css"> 
html { height: 100% } 
body { height: 100%; margin: 0; padding: 0 } 
#map { width:100%; height:90% } 
</style> 
<script src="http://maps.googleapis.com/maps/api/js?libraries=places"></script> 

<script> 
    var service, map; 

    function initialize() { 
     map = new google.maps.Map(document.getElementById("map"), { 
      zoom: 17, 
      center: {lat: -33.866651, lng: 151.195827}, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }); 

     service = new google.maps.places.PlacesService(map); 

     createMarker('ChIJN1t_tDeuEmsRUsoyG83frY4'); 
    } 

    function createMarker(placeId) { 
     var request = { 
      placeId: placeId 
     }; 

     service.getDetails(request, function (place, status) { 
      var marker = new google.maps.Marker({ 
       map: map, 
       icon: 'http://maps.google.com/mapfiles/ms/micons/green.png', 
       position: place.geometry.location 
      }); 

      var infowindow = new google.maps.InfoWindow({ 
       content: '' 
      }); 

      if (status === google.maps.places.PlacesServiceStatus.OK) { 
       var contentStr = '<h5>' + place.name + '</h5><p>' + place.formatted_address; 

       var open = "We are "; 
       if (place.opening_hours.open_now) { 
        open += "Open"; 
       } else { 
        open += "Closed"; 
        marker.setIcon('http://maps.google.com/mapfiles/ms/micons/red.png'); 
       } 

       if (!!place.opening_hours) { 
        contentStr += '<br>' + open; 
       } 
       if (!!place.formatted_phone_number) { 
        contentStr += '<br>' + place.formatted_phone_number; 
       } 
       if (!!place.website) { 
        contentStr += '<br><a target="_blank" href="' + place.website + '">' + place.website + '</a></p>'; 
       } 
      } else { 
       var contentStr = "<h5>No Result, status=" + status + "</h5>"; 
      } 

      setupInfowindow(marker, infowindow, contentStr); 
     }); 
    } 

    function setupInfowindow(marker, infoWindow, contentStr) { 
     marker.addListener('click', function() { 
      infoWindow.setContent(contentStr); 
      infoWindow.open(map, this); 
     }); 
    } 

    google.maps.event.addDomListener(window, 'load', initialize); 
</script> 
</head> 
<body> 
    <div id="map"></div> 
</body> 
</html>

出典

2017-02-02 23:30:19 duncan

GoogleマップJavascript API - 条件付きマーカー

答えて

関連する問題