Показ разных цветовых маркеров по странам на Картах Google

Question

Я использую следующую функцию PHP (главным образом в Javascript), чтобы показать некоторые карты с помощью API Javascript Google Maps.

$companyLocations - массив с адресом и широтой и длинным. Например:

$companyLocations = array(
      array('Bondi Beach', -33.890542, 151.274856), 
      array('Coogee Beach', -33.923036, 151.259052), 
      array('Cronulla Beach', -34.028249, 151.157507), 
      array('Manly Beach', -33.80010128657071, 151.28747820854187), 
      array('Maroubra Beach', -33.950198, 151.259302) 
     ); 

• $width является ширина DIV.
• $height - высота дивизиона.

Мой код:

function showMap($companyLocations, $width, $height) { 
    ?> 
     <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script> 

     <!-- Show map with given height and width --> 
     <div id="map" style="width:<?php echo $width?>;height:<?php echo $height?>;"></div> 

     <script type="text/javascript"> 
      <?php 
       // Convert the php array '$companyLocations' into Javascript array 'locations' 
       $js_LocationsArray = json_encode($companyLocations); 
      ?> 
       var map = new google.maps.Map(document.getElementById('map'), { 
        zoom: 10, 
        center: new google.maps.LatLng(-33.92, 151.25), 
        mapTypeId: google.maps.MapTypeId.ROADMAP 
       }); 

       var infowindow = new google.maps.InfoWindow(); 
       var bounds = new google.maps.LatLngBounds(); 
       var marker, i; 

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

        bounds.extend(marker.position); 

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

Как я могу показать другой цвет маркера для каждой страны? Это означает, например, если некоторые координаты из США, сделайте маркер красным цветом (например), и у меня есть другие кордины из Мексики, сделайте маркер синим цветом.

Этот пример имеет только две страны, но я могу иметь до N стран, поэтому мне нужны N цветных маркеров.

Quick Photoshop, чтобы показать мое желаемое решение:

Спасибо заранее.

Answer 1

Вы можете сделать это с помощью этого URL:

https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|FFFFFF 

Он генерирует маркер, который меняет свой цвет в зависимости от шестнадцатеричный код, который вы указали. В этом случае это FFFFFF.

Поэтому, когда вы создаете маркер, добавьте ключ icon с этим значением. В вашем случае вы можете добавить третий элемент внутри массива ячеек для кода HEX, а затем:

marker = new google.maps.Marker({ 
    position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
    map: map, 
    icon: 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=•|' + locations[i][2] 
}); 

Вы также можете сгенерировать код HEX в случайном порядке. Более подробную информацию можно найти здесь: Random HEX codes in Javascript