GHWEB06.GRASSHOPPER

配列を使用してGoogleMapに複数のマーカと情報ウィンドウを表示する(その2)

  • Category:Web関連
  • Web関連の備忘録
  • Google Mapsの表示にはAPI登録が必須になりました
    Google Mapsが表示されない場合は、APIキーの登録をお試し下さい。

    APIキーの取得方法につきましては以下サイト様の記事をご確認下さい。
    APIキーの取得 | Google Maps API入門

mapG2013年11月18日に、Google Maps JavaScript V2が非推奨になりました。そのため以前書いたGoogle Mapsのブログ記事をV2で書いて無いか見替えしていたら追加したい項目が出て来ました。そこで今回は過去記事を元に追記をしたいと思います。

一部jQueryを使用しています。jQueryは、Google Hosted Libraries の バージョン1.11.1 を使用。★バージョン2.1.1でも動作確認。

  1. GoogleMapに複数のマーカを表示する場合
  2. 開くウィンドウを一つだけにする場合
  3. マップ外のリストからウィンドウを開く場合
  4. マーカーのアイコンをデフォルトから変えたい場合
  5. 位置情報を別ファイルにして読込む場合
  6. リストと位置情報を別ファイルにして読込む場合

GoogleMapに複数のマーカを表示する場合

GoogleMapで複数のマーカと情報ウィンドウを配列を使用して表示しています。
以前の記事はこちらサンプルA

開くウィンドウを一つだけにする場合

サンプル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>高知市文化プラザかるぽーと</a></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のアルファベットアイコンに変更してみました

変更箇所①

A:アイコンを全て同じ物にする場合

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);

B:アイコンを順番で指定する場合

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);

変更箇所②

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

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"]
]

次に、jsonの読込部分を追加

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 部分を変更
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 で地図を作成してみました。
参考になる物があれば在れば幸いです。

RELATED ARTICLE
  • 掲載: