derax’s blog

小寺さんのエンジニア備忘録

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>

 結果

f:id:derax7:20160127142747p:plain