読者です 読者をやめる 読者になる 読者になる

東京の会社辞めて地方で生きるわ。

勢いで会社を辞めて縁のない地方で生きることはできるのか

【google map】複数のマーカーを設置して、マーカーをアルファベットに。

下記コードをheadタグ内に記述。

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var currentWindow = null;
function initialize() {
	var myOptions = {
		zoom:10,
                scrollwheel: false,
		center: new google.maps.LatLng(32.818199, 130.753743),
		mapTypeId: google.maps.MapTypeId.ROADMAP
		};
	var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
	var markers = [
				   ['場所名',32.000000, 130.000001], //ここは座標
				   ['場所名',32.000002, 130.000003],
				   ['場所名',32.000001, 130.000000]
				   ];
	for (var i = 0; i < markers.length; i++) {
		var name = markers[i][0];
		var latlng = new google.maps.LatLng(markers[i][1],markers[i][2]);
var icons = 'http://www.google.com/mapfiles/marker' + String.fromCharCode(65 + i) + '.png';
createMarker(name,latlng,icons,map);
 
/* 独自アイコンにするなら */
var latlng = new google.maps.LatLng(markers[i][1],markers[i][2]);
var icons = 'img/icon' + (i+1) + '.png'; //パス、ファイル名は適宜変更
createMarker(name,latlng,icons,map);
		}
}
function createMarker(name,latlng,icons,map){
var infoWindow = new google.maps.InfoWindow();
var marker = new google.maps.Marker({position: latlng,icon:icons,map: map});
google.maps.event.addListener(marker, 'click', function() {
if (currentWindow) {
    currentWindow.close();
    }
infoWindow.setContent(name);
infoWindow.open(map,marker);
currentWindow = infoWindow;
});
} 
google.maps.event.addDomListener(window, 'load', initialize);
</script>

そして、

地図を表示させたいところに下記記述。

         <div class="google-maps">
           <div id="map_canvas"></div>
         </div><!--google-maps-->


最後にcss。レスポンシブ仕様。

.google-maps {
position: relative;
/*padding-bottom: 75%;*/
height: 306px;
width:100%;
max-width:456px;
overflow: hidden;
float:left;
margin-top:12px;

}
.google-maps iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 306px; !important;
}

#map_canvas{
width:100%;
height:306px;
margin-left:auto;
margin-right:auto;	
}

【参考URL】
http://ghweb.info/post-2709.html
http://ghweb.info/post-3762.html