Google Maps API V3 и результаты Javascript и маркеры

Question

EDIT: В принципе, как ASDA магазин локатора

У меня есть магазин локатор, где, когда вы вводите в свой почтовый индекс и показывает 3 магазина, которые близки к вам. Из этого 3 маркера появляются на карте для каждого местоположения. Данные извлекаются из базы данных MYSQL, и здесь хранится lat и long. То, что я получаю, имеет результаты с номерами 1,2 и 3 и другим маркером с цифрами 1 2 и 3, чтобы они знали, что хранилище результатов относится к какому маркеру. Я знаю, как создавать маркеры, но я не уверен, как это применить. Вот мой код, который я использовал, чтобы показать результаты и отобразить маркеры на карте:

PHP

<?php which displays the results down the side of the map.. 
     if(isset($stores)){ 
      foreach($stores as $store){ ?> 

      <div class="stores"> 
      <p class="name"><?php echo $store['name']; ?></p> 
      <p class="address"><?php echo $store['address']; ?></p> 
      <p class="address"><?php echo $store['postcode']; ?></p> 
      </div> 

      <php number_format($store['distance'],2) ?> miles 

     <?php 
      } 
     } 
     ?> 

Чтобы получить маркеры для каждого результата на карте я, очевидно, используется JavaScript:

function initialize() { 

    var locations = [];  
    <?php 
    $count = 0; 
    foreach($stores as $store){ 
     ?> 
     locations.push(['<?php echo $store['name'] ?>','<?php echo $store['lat'] ?>','<?php echo $store['lng'] ?>','<?php echo $count++; ?>']); 
     <?php   
    } 
    ?> 

    var map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 5, 
     center: new google.maps.LatLng(55.136319, -2.504183), 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 

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

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

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

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

Answer 1

Markers имеет свойство icon, где вы можете изменить изображение, которое будет использоваться. Я бы рекомендовал иметь значок маркера для каждого местоположения с индексом в имени (например, marker0.png, marker1.png, marker2.png). Затем установите значок при создании маркера.

У Google есть разные, которые вы можете захватить, но URL-адреса не так легко найти все время. Вот сайт, который перечисляет некоторые из них: http://jg.org/mapping/icons.html

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

Answer 2

Я сделал это некоторое время назад со следующим подходом. Когда я объявил свой маркер, я использовал.

var marker = createMarker(map,point,label,html,rank,type); 

Тогда

function createMarker(map, latlng, title, html, rank,type) { 
    var image = new google.maps.MarkerImage("images/goldPin.png", 
    // This marker is 24 pixels wide by 37 pixels tall. 
    new google.maps.Size(24, 37), 
    // The origin for this image is 0,0. 
    new google.maps.Point(0,0), 
    // The anchor for this image is the base of the flagpole at 0,37. 
    new google.maps.Point(15, 20)); 

    var shadow = new google.maps.MarkerImage('images/goldPinShadow.png', 
    // The shadow image is larger in the horizontal dimension 
    // while the position and offset are the same as for the main image. 
    new google.maps.Size(31, 37), 
    new google.maps.Point(0,0), 
    new google.maps.Point(15, 20)); 
    // Shapes define the clickable region of the icon. 
    // The type defines an HTML <area> element 'poly' which 
    // traces out a polygon as a series of X,Y points. The final 
    // coordinate closes the poly by connecting to the first 
    // coordinate. 

    var shape = { 
     coord: [1, 1, 1, 20, 18, 20, 18 , 1], 
     type: 'poly' 
    }; 

    switch (type) { 
     case "general": 
      var markerOptions = { 
      title: title, 
      shadow: shadow, 
      icon: image, 
      shape: shape, 
      position: latlng, 
      map: map 
     } 
     break; 
     /* 
     more types go here 
     */  
} 

var marker = new google.maps.Marker(markerOptions); 

google.maps.event.addListener(marker, "click", function() { 
    var infowindowOptions = { 
     content: html 
    } 
    var infowindow = new google.maps.InfoWindow(infowindowOptions); 
     setInfowindow(infowindow); 
     infowindow.open(map, marker); 
}); 

google.maps.event.addListener(marker, "mouseover", function() { 

}); 
google.maps.event.addListener(marker, "mouseout", function() { 

}); 

    return marker; 
} 

Позвольте мне не забыть упомянуть, что я использовал пользовательские маркеры с моим приложением, которое я настоятельно рекомендую.