GoogleMapに複数アイコンを表示

 Googleマップで、複数アイコンを表示させたかったので覚え書き。

<!-- Google mapスクリプト読み込み -->

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

<!-- Google map描画領域 -->
<div id="map_canvas" style="width: 100%; height: 480px;"></div>


<script type="text/javascript">

var opts = {
  zoom: 16,
  scrollwheel: false,
  mapTypeId: google.maps.MapTypeId.ROADMAP
}; 
var map = new google.maps.Map(document.getElementById("map_canvas"),opts);

var markers = new Array();

// クリック時吹き出し
function dispInfo(marker,name) {
google.maps.event.addListener(marker, 'click',
  function(event) {
    new google.maps.InfoWindow
    ({content:name}).open(marker.getMap(), marker);
  });
}

// 住所から緯度経度に変換＆mapにマーカー表示
function convertLatlng(address,info,icon,isMain) {
  var geocoder = new google.maps.Geocoder();
  geocoder.geocode(
  {
    'address': address,
    'language': 'ja'
  },
  function(results, status){
    if(status==google.maps.GeocoderStatus.OK){
      //メイン施設の場合は中心地に設定
      if(isMain){
        map.setCenter(results[0].geometry.location);
      }
      tmp = new google.maps.Marker({
        position: results[0].geometry.location,
        map: map,
        icon: "{{STATIC_URL}}"+icon
      });
      dispInfo(tmp,info);
      markers.push(tmp);
    }
  }
  ); 
}
// メイン追加
convertLatlng("{{location.full_address}}","{{location.name}}","hoge.png",true);
// サブ追加
convertLatlng("{{location2.full_address}}","{{location2.name}}","hoge2.png",true);
// サブ追加
convertLatlng("{{location3.full_address}}","{{location3.name}}","hoge3.png",true);

</script>

 結果