Google Maps v3 - Muliple Маркеры - разные цвета

Question

Я использую ColdFusion, чтобы заполнить карту Google - и я хочу, различные цветные маркеры для вещей

Использование Google Maps API v3

Этот код работает, но они все 1 цвет маркера - зеленый всегда отображается - я не могу получить разные цвета.

Мысли? Thanx для любого входа

<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script> 

<script type="text/javascript"> 

var locations = 
[ 
<cfloop query=due> 
<cfoutput> 
<cfquery name="info" datasource="data"> 
SELECT * FROM data 
WHERE id = #due.id# 
</cfquery> 
<cfif info.gpslat is not "">["#info.id#", #info.gpslat#, #info.gpslong#,  #info.id#],</cfif> 
</cfoutput> 
</cfloop> 
]; 

var map = new google.maps.Map(document.getElementById('map'), { 
    zoom: 14, 
    center: new google.maps.LatLng(51.19, -114.48), 
    mapTypeId: google.maps.MapTypeId.HYBRID 
}); 

var infowindow = new google.maps.InfoWindow(); 

<cfloop query=due> 
<cfquery name="info" datasource="data"> 
SELECT * FROM data 
WHERE id = #due.id# 
</cfquery> 

     var marker, i; 

<cfif info.gpslat is not "">  
    <cfif due.data is 'yes'> 
    var image = 'red.png'; 
    </cfif> 
    <cfif due.data is 'no'> 
    var image = 'green.png'; 
    </cfif> 
</cfif> 
</cfloop> 


for (i = 0; i < locations.length; i++) { 
    marker = new google.maps.Marker({ 
    position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
    map: map, 
    icon: image 
    }); 

    google.maps.event.addListener(marker, 'click', (function(marker, i) { 
    return function() { 
     infowindow.setContent(locations[i][0]); 
     infowindow.open(map, marker); 
    } 
    })(marker, i)); 
} 


</script> 

Answer 1

Вы смешиваете код javascript и ColdFusion, и поэтому сделанное изображение маркера является последним, доступным в вашем цикле. То, что может работать будет

<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script> 

<script type="text/javascript"> 

    var locations = 
    [ 
    <cfloop query=due> 
    <cfoutput> 
    <cfquery name="info" datasource="data"> 
    SELECT * FROM data 
    WHERE id = #due.id# 
    </cfquery> 
    <cfif info.gpslat is not "">['#info.id#', #info.gpslat#, #info.gpslong#,#info.id#,<cfif due.data is "yes>'red.png'<cfelse>'green.png'</cfif>],</cfif> 
    </cfoutput> 
    </cfloop> 
    ]; 

    var map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 14, 
     center: new google.maps.LatLng(51.19, -114.48), 
     mapTypeId: google.maps.MapTypeId.HYBRID 
    }); 

    var infowindow = new google.maps.InfoWindow(); 

    for (i = 0; i < locations.length; i++) { 
     marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
     map: map, 
     icon: locations[i][4] 
    }); 

    google.maps.event.addListener(marker, 'click', (function(marker, i) { 
      return function() { 
       infowindow.setContent(locations[i][0]); 
       infowindow.open(map, marker); 
      } 
     })(marker, i)); 
    } 
</script> 

код не оптимизирован также ... но это другое дело :-)

Answer 2

Вы можете использовать CSS Sprite techniques использовать различные маркеры:

var mImage = new google.maps.MarkerImage("/i/Images/IconsLarge.png", 
    new google.maps.Size(34, 35), 
    new google.maps.Point(0, vPos), <--- set the vertical position to match your sprite offset. 
    new google.maps.Point(10, 34) 
); 
//insert marker 
marker = new google.maps.Marker({ 
    icon: mImage, 
    position: new google.maps.LatLng(latitude, longitude), 
    map: map 
}); 

Answer 3

Я бы сказал, что вам нужен массив или что-то. Этот цикл:

<cfloop query=due> 
<cfquery name="info" datasource="data"> 
SELECT * FROM data 
WHERE id = #due.id# 
</cfquery> 

     var marker, i; 

<cfif info.gpslat is not "">  
    <cfif due.data is 'yes'> 
    var image = 'red.png'; 
    </cfif> 
    <cfif due.data is 'no'> 
    var image = 'green.png'; 
    </cfif> 
</cfif> 
</cfloop> 

Что я предполагаю, что имеется в виду, чтобы сделать что-либо/или и привести к более чем один вид маркера на карте - на самом деле productes одну переменную для «образ» .. это будет делать:

var image = 'red.png'; 
var image = 'red.png'; 
var image = 'green.png'; 

Но каждый оператор набора будет перезаписывать следующий в сценарии.

Вместо этого создайте функцию JS, которую вы вызываете, которая возвращает красный или зеленый цвет. и в пространстве, где вы делаете:

icon: image; 

вы бы сейчас сделать:

icon: getimage(var1, var2); 

где var1 и var2 равное info.gsplat и due.data. Либо это, либо все это нужно пройти внутри цикла, чтобы вы каждый раз записывали каждый маркер.