GHWEB06.GRASSHOPPER

サンプルAは、マーカをクリックする度に新しいウィンドウが開きます。
そのため、マーカーの位置が近いとウィンドウが重なって見辛くなります。
こちらは、開くウィンドウを一つだけ表示するように変更したものになります。

サンプルAからの変更箇所

9行目付近に変数「currentWindow」を追加。

/* 変更前 */
function initialize() {

/* 変更後 */
var currentWindow = null;
function initialize() {

33行目付近のクリック処理の部分を、開いているウィンドウがあれば閉じてから、新しいウィンドウを開くというように書き替えます。

/* 変更前 */
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(name);
infoWindow.open(map,marker);
});

/* 変更後 */
google.maps.event.addListener(marker, 'click', function() {
if (currentWindow) {
	currentWindow.close();
	}
infoWindow.setContent(name);
infoWindow.open(map,marker);
currentWindow = infoWindow;
});

サンプルB

サンプルBのマップ外にリストを作成しクリックすると対応したマーカーのウィンドウが開くようにしてみました。閲覧者の方が施設名から目的の場所を探せるようになりますので地理に詳しくない方に良いかと思います。

サンプルBからの変更箇所

地図のリストを追加します。順番は、javascript内のmarkersで指定した順に並べます。
後で、jQueryを使ってクリックしたリスト順を取得して、対応したマーカ―を表示させる処理を追加します。

<ul id="mapList">

<li>高知県立美術館</li>


<li>牧野植物園</li>


<li>桂浜</li>


<li>高知市文化プラザかるぽーと</li>


<li>高知城</li>

</ul>

9行目付近に配列、変数を追加。

/* 変更前 */
var currentWindow = null;
function initialize() {

/* 変更後 */
var currentWindow = null;
var maplist = new Array();
var cnt = 0;
function initialize() {

function createMarker内のgoogle.maps.event.addListener(…);の後に配列を追加。

/* 追加 */
maplist[cnt++] = marker;

リストをクリックした時の処理をjQueryを使って記述します。
※Google Hosted Libraries からjQueryの指定を行います。

$(function(){
$('#mapList li').click(function(){
var no = $('#mapList li').index(this);
google.maps.event.trigger(maplist[no], "click");
});
});

サンプルC

サンプルBのアイコンをgoogle mapのアルファベットアイコンに変更してみました

変更箇所①

26行目付近、var latlng = new google.maps.LatLng の後に
使用するアイコンを指定します。

/* 変更前 */
var latlng = new google.maps.LatLng(markers[i][1],markers[i][2]);
createMarker(name,latlng,map);

/* 変更後 */
var latlng = new google.maps.LatLng(markers[i][1],markers[i][2]);
var icons = 'http://www.google.com/mapfiles/markerA.png';
createMarker(name,latlng,icons,map);

/* 独自アイコンにするなら */
var latlng = new google.maps.LatLng(markers[i][1],markers[i][2]);
var icons = 'img/iconA.png'; //パス、ファイル名は適宜変更
createMarker(name,latlng,icons,map);

26行目付近、var latlng = new google.maps.LatLng の後に使用するアイコンを指定します。

/* 変更前 */
var latlng = new google.maps.LatLng(markers[i][1],markers[i][2]);
createMarker(name,latlng,map);

/* 変更後 */
/*
String.fromCharCodeを使って値の文字コードを変換します。
Aからの連番で始めたいので String.fromCharCode(65 + i)としています。
*/
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);

変更箇所②

※上記変更箇所のＡ・Ｂどちらを変更した上で下記を変更します。

31～33行目付近、createMarker、new google.maps.Markerの引数に「icons」を追加。

/* 変更前 */
function createMarker(name,latlng,map){
var infoWindow = new google.maps.InfoWindow();
var marker = new google.maps.Marker({position: latlng,map: 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});

サンプルD

サンプルDの位置情報の指定部分 var markers を外部ファイル化（json）にしてみました。
jsonの読込は jQueryのgetJSON を使っています。

変更箇所

ファイル名を maps.json で保存。

[
["高知県立美術館","33.56104","133.57295"],
["牧野植物園","33.54661","133.57790"],
["桂浜","33.497145","133.57480"],
["高知市文化プラザかるぽーと","33.55826","133.54725"],
["高知城","33.56067","133.53147"]
]

forで回した結果を引数で指定します。

$(function() {
$.getJSON("maps.json", function(markers){
var setno = markers.length;
var title = new Array();
var lat = new Array();
var lng = new Array();
for (var i = 0; i < markers.length; i++) {
title[i] = markers[i][0];
lat[i] = markers[i][1];
lng[i] = markers[i][2];
}
initialize(setno,title,lat,lng);
});
});

function initialize(setno,title,lat,lng) {
var myOptions = {
zoom: 12,
center: new google.maps.LatLng(33.53910, 133.56010),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
for (var i = 0; i < setno; i++) {
var name = title[i];
var latlng = new google.maps.LatLng(lat[i],lng[i]);
var icons = 'http://www.google.com/mapfiles/marker' + String.fromCharCode(65 + i) + '.png';
createMarker(name,latlng,icons,map)
}
}

配列部分の指定が無くなってスッキリしました！

サンプルE

サンプルEを外部ファイルからリストを生成出来るようにしました。
今回の総まとめ的な感じです。

変更箇所

9行目付近に配列、変数を追加。

/* 変更前 */
var currentWindow = null;
function initialize() {

/* 変更後 */
var currentWindow = null;
var maplist = new Array();
var cnt = 0;
function initialize() {

appendで追加した要素のクリック処理

/* .click()だと動かないので */
$('#mapList li').click(function(){…} 

/* .on() を使用しています　*/
$('#myList').on('click','li',function(){…}

リストの生成とクリック処理を足してこんな感じになります。

$(function() {
$.getJSON("maps.json", function(markers){
var setno = markers.length;
var title = new Array();
var lat = new Array();
var lng = new Array();
var lists = "";
for (var i = 0; i < markers.length; i++) {
title[i] = markers[i][0];
lat[i] = markers[i][1];
lng[i] = markers[i][2];
lists += '
<li class="btn">'+title[i]+'</li>

\n';
}
$("#myList").append(lists);
initialize(setno,title,lat,lng);
});
$('#myList').on('click','li',function(){
var no = $('#myList li').index(this);
google.maps.event.trigger(maplist[no], "click");
});
});

function createMarker内のgoogle.maps.event.addListener(…);の後に配列を追加。

/* 追加 */
maplist[cnt++] = marker;

サンプルF

長々となりましたが、google map で地図を作成してみました。
参考になる物があれば在れば幸いです。