Цвет значка Google Map изменяется стоимостью от Стола Сплава

У меня есть веб-сайт в http://www.gfmap.com и это показывает рестораны без глютена, магазины, пекарни, и т.д. Это убегается Стол Сплава больше чем с 20,000 пунктов.

Я хочу знать, могу ли я изменить цвет значка Google Map на основе категории (ресторан, и т.д.)

Вот код...

<script type="text/javascript">     
 var initialLocation; 
 var companyLocale = new google.maps.LatLng(-33.869629, 151.206955); 
 var localArray = [companyLocale]; 
 var noGeo = new google.maps.LatLng(51.506325, -0.127144);        
 var map;    
 var layerl0;    
 function initialize() {
    map = new google.maps.Map(document.getElementById('themap'),
     {
        zoom: 12 
     });
    if(navigator.geolocation) {
        browserSupportFlag = true;
        navigator.geolocation.getCurrentPosition(function(position) {
        initialLocation = new     google.maps.LatLng(position.coords.latitude,position.coords.longitude);
        map.setCenter(initialLocation);
    }, function() {
        handleNoGeolocation(browserSupportFlag);
       });
    }else {
       handleNoGeolocation();
    }
function handleNoGeolocation() {
  initialLocation = noGeo;
  localArray.unshift(initialLocation);
  map.setCenter(initialLocation);
}
    var style = [
    {
      featureType: 'administrative.land_parcel',
      elementType: 'all',
      stylers: [
        { visibility: 'off' }
      ]
    }
  ];

    var styledMapType = new google.maps.StyledMapType(style, {
      map: map,
      name: 'Styled Map'
    });
  map.mapTypes.set('map-style', styledMapType);
  map.setMapTypeId('map-style');
  layerl0 = new google.maps.FusionTablesLayer({
    query: {
      select: "'location'",
      from: 4015038
    },
    map: map
  });
}
function changeMapl0() {
  var searchString = document.getElementById('search-string-l0').value.replace(/'/g, "\\'");
  layerl0.setOptions({
    query: {
      select: "'location'",
      from: 4015038,
      where: "'Type' = '" + searchString + "'"
    }
  });
}
google.maps.event.addDomListener(window, 'load', initialize);
function ga() {
  var address = document.getElementById('q').value;
  if (address != ''){
    var geocoder = new google.maps.Geocoder();
        geocoder.geocode( { 'address': address + ' AU'}, function(results, status) {
          if (status == google.maps.GeocoderStatus.OK) {
            map.setCenter(results[0].geometry.location);
            if (results[0].geometry.location_type == google.maps.GeocoderLocationType.APPROXIMATE){
              map.setZoom(12);
            } else {map.setZoom(12);}
          }
          else {alert("Sorry, we can't find that place using Google.");}
        });

  }
}
</script>
<script type="text/javascript">

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-31494612-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

</script>

I think the answer is related to this post Custom Google Map Icon If Value >=1 but I cannot make it work. I don't know JavaScript and have really just hacked this website together best I can.

Любая помощь ценится.

Спасибо

Матовый

2
nl ja de
Необходимо переформатировать кодовый блок, it' s очень трудно, чтобы читать
добавлено автор duncan, источник

2 ответы

Есть много предопределенных маркеров, которые можно использовать для fusionTables (и нет никакого способа применить другие маркеры, чем они).

You'll find them here: https://www.google.com/fusiontables/DataSource?docid=1BDnT5U1Spyaes0Nj3DXciJKa_tuu7CzNRXWdVA (click on visualize->map to see them)

Можно использовать их для моделирования Слоя, например:

styles:[{
            where: "Type='Restaurant'",
            markerOptions: {iconName: "rec_dining"}
          }]

Demo: http://jsfiddle.net/doktormolle/5MuL4/

1
добавлено
Или можно использовать Пользовательский интерфейс FusionTables, чтобы создать новую колонку и назначить им там.
добавлено автор geocodezip, источник
Зависит от того, как может "категории", там. Если есть больше чем 5 (который есть not' t в этом случае), динамическое решение для моделирования won' t работа.
добавлено автор geocodezip, источник
Wouldn' t, что быть избыточным, когда он только want' s, чтобы иметь маркеры на основе категории?
добавлено автор Dr.Molle, источник
хорошо, that' s аргумент
добавлено автор Dr.Molle, источник
Когда вы смотрите на связанную скрипку, необходимо взять объект, используемый в качестве аргумента в пользу новый google.maps. FusionTablesLayer() и использование это в вашем коде как аргумент в пользу layerl0.setOptions()
добавлено автор Dr.Molle, источник
следующий раз, прежде чем вы будете намереваться загрузить стол, чтобы изменить его с, превосходит, имеет в виду это it' s таблица базы данных. Можно обновить его, не загружая при помощи подобного SQL-з¦прос¦м.
добавлено автор Dr.Molle, источник
Спасибо все так. ' styles' похож на него, может быть движение. Я попробую его сегодня вечером, когда дети лягут спать! Куда я поместил бы команду в код карт, я имею выше, или разве это не имеет значения? И большое спасибо за пример. Я должен согласиться с этим. вы - звезда, доктор Молл.
добавлено автор Mattmartel, источник
Хорошо, пытаюсь заставить это работать. Еще раз спасибо. Использую превосходный jsfiddle. Придали ему форму вилки к jsfiddle.net/mattmartel/bYgWu/1 и поместили веб-страницу в jsfiddle.net/mattmartel/a8YyQ/1 Я буду видеть, как я иду.
добавлено автор Mattmartel, источник
Доктор Молл, Еще раз спасибо за вашу помощь. Я просто don' у t есть навыки JavaScript (изучит, когда я нахожу запасную целую жизнь), но я загрузил стол Сплава как csv и затем использовал Excel, чтобы сделать все стили маркера. Теперь загрузили и я в настоящее время жду 20,000 мест, чтобы геокодировать. В конце это был мой страх перед JS против моего страха перед Excel.
добавлено автор Mattmartel, источник

Можно динамично просить изображения символа от Google картирует API с URL:

http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|FE7569

Which looks like this: the image is 21x43 pixels and the pin tip is at position (10, 34)

И вы также захотите отдельное теневое изображение (так, чтобы оно не накладывалось на соседние символы):

http://chart.apis.google.com/chart?chst=d_map_pin_shadow

Which looks like this: the image is 40x37 pixels and the pin tip is at position (12, 35)

Когда вы строите ваш MarkerImage необходимо установить размер и точки привязки соответственно:

    var pinColor = "FE7569";
    var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor,
        new google.maps.Size(21, 34),
        new google.maps.Point(0,0),
        new google.maps.Point(10, 34));
    var pinShadow = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_shadow",
        new google.maps.Size(40, 37),
        new google.maps.Point(0, 0),
        new google.maps.Point(12, 35));

Можно тогда добавить маркер к карте с:

        var marker = new google.maps.Marker({
                position: new google.maps.LatLng(0,0), 
                map: map,
                icon: pinImage,
                shadow: pinShadow
            });

Просто замените "FE7569" цветовым кодом, который вы после.

1
добавлено
вы читали, что мы говорим о fusionTables, как вы применили бы маркер там?
добавлено автор Dr.Molle, источник