google maps カスタマイズ まとめ（複数マーカー&オリジナルマーカー&情報ウィンドウのカスタマイズなど）

google mapsカスタマイズまとめ

図のコードは以下

mygmap.js
var currentInfoWindow = null; //最後に開いた情報ウィンドウを記憶 function initialize() { //地図初期化 var initPos = new google.maps.LatLng(37.916192, 139.036413); var myOptions = { center : initPos, zoom : 4, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map_canvas = new google.maps.Map(document.getElementById("map_canvas"), myOptions); //マーカー1,2を作成 var markerPos1 = new google.maps.LatLng(35.69384, 139.703549); var markerPos2 = new google.maps.LatLng(34.693738, 135.502165); var markerPos3 = new google.maps.LatLng(35.011636, 135.768029); var markerPos4 = new google.maps.LatLng(33.590355, 130.401716); var markerPos5 = new google.maps.LatLng(38.268837, 140.8721); createMarker(map_canvas, markerPos1, "<p id='map_tit'> 新宿</p> "+"<p> 詳細</p> "); createMarker(map_canvas, markerPos2, "<p id='map_tit'> 大阪</p> "+"<p> 詳細</p> "); createMarker(map_canvas, markerPos3, "<p id='map_tit'> 京都</p> "+"<p> 詳細</p> "); createMarker(map_canvas, markerPos4, "<p id='map_tit'> 福岡</p> "+"<p> 詳細</p> "); createMarker(map_canvas, markerPos5, "<p id='map_tit'> 宮城</p> "+"<p> 詳細</p> "); } function createMarker(map, latlng, text) { var infoWndOpts = { content : text, }; var infoWnd = new google.maps.InfoWindow(infoWndOpts); // マーカー画像を作成 var markerImg = new google.maps.MarkerImage( // マーカーの画像URL "images/common/marker.png", // マーカーのサイズ new google.maps.Size(31, 37), // 画像の基準位置 new google.maps.Point(0, 0), // Anchorポイント new google.maps.Point(10, 37) ); var markerOpts = { position : latlng, map : map, icon: markerImg }; var marker = new google.maps.Marker(markerOpts); google.maps.event.addListener(marker, "click", function(){ //先に開いた情報ウィンドウがあれば、closeする if (currentInfoWindow) { currentInfoWindow.close(); } //情報ウィンドウを開く infoWnd.open(map, marker); currentInfoWindow = infoWnd; }); return marker; } window.onload = initialize;

gmapv3.css
@charset "utf-8"; @import url("gh-buttons.css"); /* selector */ html,body{margin:0;padding:0;font-size:12px;height:100%;line-height:1.5;word-break:break-all;} body{margin:10px;} textarea#res{margin:10px 0;width:498px;padding:0;height:100px;font-size:9px;box-sizing: border-box;} h1, h2, h3, p{display:block;margin:10px 0;font-size:100%;} pre{overflow:auto;} /* class */ .w100p{width:100%;} .cf:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0;} .cf{display:inline-block;} html[xmlns] .cf{display:block;} * html .cf{height:1%;} .size{box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;-o-box-sizing:border-box;} .shadow{box-shadow:1px 1px 2px #888;-webkit-box-shadow:1px 1px 2px #888;-moz-box-shadow:1px 1px 2px #888;-ms-box-shadow:1px 1px 2px #888;-o-box-shadow:1px 1px 2px #888;} /* map_canvas */ #map_canvas{ width:386px; height:320px; } #zoomlevel span{font-weight:bold;font-size:120%;} #res{color:red;} /* infowindow */ dl#infowin1{margin:0;padding:0;} dl#infowin1 dt{margin:0;padding:0;font-weight:bold;} dl#infowin1 dd{margin:5px 0 0 0;padding:0;line-height:1.5;} dl#infowin1 dd img{padding:2px;background:#fff;border:1px solid #ccc;margin-right:5px;} dl#infowin2{margin:0;padding:0;} dl#infowin2 dt{margin:0;padding:0;font-weight:bold;} dl#infowin2 dd{margin:5px 0 0 0;padding:0;line-height:1.5;} dl#infowin2 dd img{padding:2px;background:#fff;border:1px solid #ccc;margin-right:5px;} @media only screen and (min-device-width:768px) and (max-device-width:1024px){ #map_canvas { width:100%;height:100%;} } @media only screen and (min-device-width:320px) and (max-device-width:480px){ #map_canvas { width:100%;height:100%;} textarea#res { width:100%;} } /* map */ #map{width:100%;height:100%;margin:0;padding:0;} /* infowindow */ .infowin{font-size:11px;overflow:visible;line-height:1;} .infowin p{margin:5px 0;padding:0;} .infowin .picframe{overflow:hidden;text-align:center;} .infowin .picframe img{border:2px solid #fff;overflow:hidden;margin:5px;} .infowin .ttl{width:96%;overflow:hidden;} .infowin .ttl b{font-size:130%;overflow:hidden;} .infowin .ttl img{margin-right:10px;width:16px;height:16px;float:left;overflow:hidden;} .infowin ul{margin:0;padding:0;list-style:none;} .infowin li{margin:0;padding:0;list-style:none;} .infowin table{margin:5px 0;padding:0;border:1px solid #ccc;border-collapse:collapse;width:100%;} .infowin th{margin:0;padding:0;border:1px solid #ccc;width:6em;white-space:nowrap;text-align:center;} .infowin td{margin:0;padding:0 0 0 1em;border:1px solid #ccc;text-align:left;} .infowin th span{display:block;font-weight:normal;} .infowin .comment{margin:5px 0;padding:0;height:100px;background:#eee;overflow:auto;} /* panowin */ .panowin{font-size:11px;overflow:visible;line-height:1;margin:0;padding:0;} .panowin .thumb{text-align:center;} .panowin .thumb img{border:2px solid #fff;} .panowin p{margin:5px 0 0 0;padding:0;} /* custom infowindow */ .customwin{border:1px solid #a0a0a4;line-height:1;margin:0;padding:0;padding:5px;background:#fff;margin-bottom:33px;margin-top:33px;font-size:11px;} .customwin a{color:#666;} .customwin .logo{width:119px;height:25px;} .customwin .author{margin:0;padding:0;} .customwin .thumb{margin:0 auto 5px auto;padding:0;width:100%;} .customwin .thumb img{display:block;width:100%;}

html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <title>設置サンプル</title> <link rel="stylesheet" type="text/css" href="css/gmapv3.css" /> <!-- jQuery --> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> <!-- Google Maps APIの読み込み --> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> <script type="text/javascript" src="js/mygmap.js"></script> </head> <body> <div id="map_canvas"> </div> </body> </html>

参考サイト
・google map 活用講座
・PHP&JavaScript Room　「情報ウィンドウ」
・google developers 「Info windows」
・lopan 「Google Maps APIのおさらい。」