Google Maps Javascript API - условные маркеры

-1

В настоящее время я работаю над веб-приложением, которое позволяет пользователям находить близлежащие кафе. Я нахожусь в процессе добавления функциональности, которая позволяет пользователю узнать, открыто или закрыто кафе, и успешно добавила эту информацию, чтобы она отображалась в infowindow.Google Maps Javascript API - условные маркеры

Для лучшего удобства работы я также хотел бы настроить карту таким образом, чтобы цвет маркера менялся в зависимости от статуса открытого кафе. Зеленый маркер = открытый и красный маркер = закрыт

Вот текущий сценарий я поставил вместе для маркеров/InfoWindow детали

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); 
      } 
     }); 
    }); 
}

Я пытался добавить в специфических маркеров SVGs в условном операторе, но это, казалось, не работало

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 no, я бы хотел, чтобы цвет маркера менялся в зависимости от информации о времени открытия, полученной из google places API. –

ОК, вот более или менее рабочая версия того, что вы пытаетесь сделать. Вы должны были бы вызвать createMarker функцию несколько раз с различными placeIds

<!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 Maps Javascript API - условные маркеры

ответ

Смежные вопросы