人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

GoogleMapsAPI を使ってるコードを、OpenStreetMapAPI に書き換えたいと思っており、質問させてください。
現在、WordPressでGoogleMapを使い、地域情報サイトを作ろうとしております。
固定ペ?ジに設置したGoogleMapに、店舗情報(post)の数だけマ?カ?が表示されるようにしています。
(店舗情報には緯度経度の情報を持たせています)
このマップをGoogle MapからOpenStreetMapに書き換えたいのです。
また、その際にGoogleMapでいうところの「MarkerClusterer」のような機能があればさらに嬉しいです。
ちなみに、マップに表示されたマ?カ?をクリックすると、その店舗情報ペ?ジ(post)にジャンプするようになっていて、その店舗情報ペ?ジにも、その店舗専用のマップを表示しており、そちらもOpenStreetMapに変更したいのです。
補足の欄に現状の、固定ペ?ジでマップ表示させるためのコ?ド、店舗専用マップを表示させるためのコ?ドを貼りますので具体的なアドバイスをいただけませんでしょうか。
なにとぞよろしくお願いいたします。
そのものズバリご回答いただけた場合、設定以上のポイントをお支払いさせていただきます。

●質問者: ykhpno1
●カテゴリ:コンピュータ ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

質問者から

下記のコ?ドに出てくる以下のものは、カスタムフィ?ルドで設定した値が出力されます。

centerlat マップ中心点の緯度
centerlng マップ中心点の経度
zoom ズ?ムレベル
displaycategory 表示するカテゴリ?のスラッグ
lat 店舗の緯度
lon 店舗の経度
Name 店舗の業種名



固定ペ?ジのコ?ド(表示条件を入力すればその条件に合った複数の店舗がグ?グルマップ上に表示される)

<?php
$place = $_POST['place'];
$cc = $_POST['cc'];
if ($cc) {
foreach ($cc as $v) {
$cc_stat[$v] = 'checked';
}
}
?>

<style>
form label {
margin-right: 2ex;
}
</style>
<form action="" method="post">
検索したい地域 <input type="text" name="place" value="<?php echo $place ?>">
<!-- カテゴリーの指定 -->
<label><input type="checkbox" name="cc[]" value="2" <?php echo $cc_stat[2] ?>>飲食 </label>
<label><input type="checkbox" name="cc[]" value="3" <?php echo $cc_stat[3] ?>>家関係 </label>
<label><input type="checkbox" name="cc[]" value="4" <?php echo $cc_stat[4] ?>>ファッション関係 </label>
<label><input type="checkbox" name="cc[]" value="5" <?php echo $cc_stat[5] ?>>ペット関係 </label>
<br>
<input type="submit" name="send" value="検索">
</form>



<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<!--
<script type="text/javascript" src="https://googlemaps.github.io/js-marker-clusterer/src/markerclusterer.js"></script>
-->

<?php
// $categories = get_post_meta( $post->ID, 'displaycategory', true);
// if ( have_posts() ) : query_posts('category_name=' . $categories . '&showposts=10000');
?>
<?php
if ($place):

$args = Array(
'post_type' => 'post',
'posts_per_page' => -1,
'meta_query' => array(array(
'key' => 'address',
'value' => $place,
'compare' => 'LIKE'
))
);

// カテゴリーのどれかにチェックが入っていたら、検索条件を追加する
$cc = $_POST['cc'];
if (sizeof($cc) > 0) {
$args['category__in'] = $cc;
}

$the_query = new WP_Query($args);

if ($the_query->have_posts()):
?>
<div id="map" style="width: 99%; height: 650px;"></div>
<script type="text/javascript">

var posts = [];
<?php while ($the_query->have_posts()) :
$the_query->the_post();
$googlemap = get_field('googlemap');
if (! $googlemap) { // マップ住所が登録されていないこともある
continue;
}
$category = get_the_category(); 
?>
posts.push({
lat: <?php echo $googlemap['lat']; ?>,
lng: <?php echo $googlemap['lng']; ?>,
name: '<?php echo post_custom("Name")?>',
link: '<?php the_permalink(); ?>',
title: '<?php the_title(); ?>',
cat_id: '<?php echo $category[0]->cat_ID; ?>'
});
<?php endwhile; // End the loop. Whew. ?>

// カテゴリーID とマーカー画像の対応
var icon_map = {
2: "http://maps.google.co.jp/mapfiles/ms/icons/red-dot.png",
3: "http://maps.google.co.jp/mapfiles/ms/icons/blue-dot.png",
4: "http://maps.google.co.jp/mapfiles/ms/icons/yellow-dot.png",
5: "http://maps.google.co.jp/mapfiles/ms/icons/green-dot.png",
};

// 地図の中心、最北西、再南東
var sum_lat = 0, sum_lng = 0;
var min_lat = 999, min_lng = 999;
var max_lat = 0, max_lng = 0;
for (var i = 0 ; i < posts.length ; ++i) {
var lat = posts[i].lat, lng = posts[i].lng;
sum_lat += lat;
sum_lng += lng;
min_lat = Math.min(min_lat, lat);
max_lat = Math.max(max_lat, lat);
min_lng = Math.min(min_lng, lng);
max_lng = Math.max(max_lng, lng);
}
var pos_center = {lat: sum_lat / posts.length, lng: sum_lng / posts.length};
var pos_sw = new google.maps.LatLng(max_lat,min_lng);
var pos_ne = new google.maps.LatLng(min_lat,max_lng);

google.maps.event.addDomListener(window, 'load', function() {
var mapdiv = document.getElementById('map');
var myOptions = {
zoom: 11,
center: new google.maps.LatLng(pos_center.lat, pos_center.lng),
mapTypeId: google.maps.MapTypeId.ROADMAP,
scaleControl: true
};
var map = new google.maps.Map( mapdiv, myOptions );
map.fitBounds(new google.maps.LatLngBounds(pos_sw, pos_ne));

// Zoom の最大値は 16 まで
var zoom_listener = google.maps.event.addListener(map, "idle", function() { 
if (map.getZoom() > 16) {
map.setZoom(16); 
}
google.maps.event.removeListener(zoom_listener); 
});


var marker = [];
var infowindow = [];

for (var i = 0 ; i < posts.length ; ++i) {
var post = posts[i];

// 緯度、経度を指定して Marker を作成
var latlng = new google.maps.LatLng(post.lat, post.lng);
var m = new google.maps.Marker({
icon: icon_map[ post.cat_id ],
position: latlng,
map: map,
title: post.title
});
marker.push(m);

var iw = new google.maps.InfoWindow({
content: '<div style="width : 100%;height : 36px;">' + post.name + ':' +
 '<a href="' + post.link + '">' + post.title + '</a></div>',
size: new google.maps.Size(50, 30)
});
infowindow.push(iw);

var handler = (function() {
var m_ = m, iw_ = iw;
return function() {
if (iw_.getMap() == null){
iw_.open(map, m_);
} else {
iw_.close();
}
};
})();
google.maps.event.addListener(m, 'click', handler);
}

var markerCluster = new MarkerClusterer( map, marker );
});
</script>

<?php else: ?>
該当する店舗はありませんでした。
<?php endif; ?>

<?php else: ?>
地域を入力してください。
<?php endif; ?>





店舗情報ペ?ジ(post)に表示させている、その店舗のマップ

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
google.maps.event.addDomListener(window, 'load', function() {
var mapdiv = document.getElementById( 'map' );
var myOptions = {
zoom: 17,
center: new google.maps.LatLng( <?php echo post_custom("lat")?>,<?php echo post_custom("lon")?> ),
mapTypeId: google.maps.MapTypeId.ROADMAP,
scaleControl: true
};
var map = new google.maps.Map( mapdiv, myOptions );
var marker = [];
var infowindow = [];
marker[0] = new google.maps.Marker({icon: 'http://maps.google.co.jp/mapfiles/ms/icons/red-dot.png',position: new google.maps.LatLng(<?php echo post_custom("lat")?>,<?php echo post_custom("lon")?>),
map: map,
title: '<?php the_title(); ?>'
});
});
</script>


グ?グルマップからオ?プンストリ?トマップに変更し、以下のことを満足したいのです。
・店舗の場所にマーカーを設置する
・マーカーをクリックすると吹き出しが表示され、もう一度クリックすると吹き出しが消える
・カテゴリーごとにマーカーの画像を変える
・検索結果の店舗が全て表示されるように表示範囲を調整する


1 ● a-kuma3
●5000ポイント ベストアンサー

以下のような感じで、それっぽく表示されるかなあ、と思います。

<?php
$place = $_POST['place'];
$cc = $_POST['cc'];
if ($cc) {
 foreach ($cc as $v) {
 $cc_stat[$v] = 'checked';
 }
}
?>

<style>
form label {
 margin-right: 2ex;
}
</style>
<form action="" method="post">
 検索したい地域 <input type="text" name="place" value="<?php echo $place ?>">
 <!-- カテゴリーの指定 -->
 <label><input type="checkbox" name="cc[]" value="2" <?php echo $cc_stat[2] ?>>飲食 </label>
 <label><input type="checkbox" name="cc[]" value="3" <?php echo $cc_stat[3] ?>>家関係 </label>
 <label><input type="checkbox" name="cc[]" value="4" <?php echo $cc_stat[4] ?>>ファッション関係 </label>
 <label><input type="checkbox" name="cc[]" value="5" <?php echo $cc_stat[5] ?>>ペット関係 </label>
 <br>
 <input type="submit" name="send" value="検索">
</form>



<!-- ★ Google Maps API → OpenLayers API -->
<script type="text/javascript" src="http://www.openlayers.org/api/OpenLayers.js"></script>
<!--
<script type="text/javascript" src="https://googlemaps.github.io/js-marker-clusterer/src/markerclusterer.js"></script>
-->

<?php
// $categories = get_post_meta( $post->ID, 'displaycategory', true);
// if ( have_posts() ) : query_posts('category_name=' . $categories . '&showposts=10000');
?>
<?php
if ($place):

 $args = Array(
 'post_type' => 'post',
 'posts_per_page' => -1,
 'meta_query' => array(array(
 'key' => 'address',
 'value' => $place,
 'compare' => 'LIKE'
 ))
 );

 // カテゴリーのどれかにチェックが入っていたら、検索条件を追加する
 $cc = $_POST['cc'];
 if (sizeof($cc) > 0) {
 $args['category__in'] = $cc;
 }

 $the_query = new WP_Query($args);

 if ($the_query->have_posts()):
?>
<div id="map" style="width: 99%; height: 650px;"></div>
<script type="text/javascript">
(function() { // ★ こんなので、くるんでみる

 var posts = [];
<?php while ($the_query->have_posts()) :
 $the_query->the_post();
 $googlemap = get_field('googlemap');
 if (! $googlemap) { // マップ住所が登録されていないこともある
 continue;
 }
 $category = get_the_category(); 
?>
 posts.push({
 lat: <?php echo $googlemap['lat']; ?>,
 lng: <?php echo $googlemap['lng']; ?>,
 name: '<?php echo post_custom("Name")?>',
 link: '<?php the_permalink(); ?>',
 title: '<?php the_title(); ?>',
 cat_id: '<?php echo $category[0]->cat_ID; ?>'
 });
<?php endwhile; // End the loop. Whew. ?>

// ★ これ以降、OpenLayers API を使うように、ばっさりと書き換え
 var map;
 var select;

 function display_map() {
 
 // マーカーとツールチップを、店舗情報毎に設定するための overlay
 var overlay = new OpenLayers.Layer.Vector('Overlay', {
 styleMap: new OpenLayers.StyleMap({
 externalGraphic: '${marker_image}',
 graphicWidth: 21,
 graphicHeight: 25,
 graphicYOffset: -25,
 cursor: "pointer",
 title: '${tooltip}',
 })
 });


 var icon_map = {
 2: "http://dev.openlayers.org/img/marker.png",
 3: "http://dev.openlayers.org/img/marker-blue.png",
 4: "http://dev.openlayers.org/img/marker-gold.png",
 5: "http://dev.openlayers.org/img/marker-green.png",
 };

 var epsg4326 = new OpenLayers.Projection("EPSG:4326");
 var epsg3857 = new OpenLayers.Projection("EPSG:3857");

 // マーカーの生成
 var features = [];
 for (var i in posts) {
 var post = posts[i];
 features.push(new OpenLayers.Feature.Vector(
 new OpenLayers.Geometry.Point(post.lng, post.lat)
 .transform(epsg4326, epsg3857), {
 tooltip: post.title,
 marker_image: icon_map[ post.cat_id ],
 post: post,
 }
 ));
 }

 overlay.addFeatures(features);

 overlay.events.on({
 'featureselected': display_popup,
 'featureunselected': erase_popup,
 });

 // マップの生成
 map = new OpenLayers.Map("map");
 
 map.addLayers([new OpenLayers.Layer.OSM(), overlay]);
 
 // マーカーのクリック状態を取得するために、SelectFeature なるものを作る
 select = new OpenLayers.Control.SelectFeature(overlay);
 map.addControl(select);
 select.activate();

 // マーカーが含まれる範囲の Bounds と、それに合わせたズーミング
 var bounds = new OpenLayers.Bounds();
 for (var i in posts) {
 bounds.extend(new OpenLayers.LonLat(posts[i].lng, posts[i].lat));
 }
 bounds.transform(epsg4326, epsg3857);
 map.zoomToExtent(bounds);

 // ズームの最大値は 16 まで
 if (map.getZoom() > 16) {
 map.zoomTo(16);
 }
 }

 // 吹き出しの「×」を押したときの処理
 function close_popup(evt) {
 select.unselect(this.feature);
 }

 // マーカーをクリックしたときに吹き出しを表示する
 function display_popup(evt) {
 var feature = evt.feature;
 var post = feature.attributes.post;
 var content = '<div>' + post.name + ':' + '<a href="' + post.link + '">' + post.title + '</a></div>';

 popup = new OpenLayers.Popup.FramedCloud("featurePopup",
 feature.geometry.getBounds().getCenterLonLat(),
 new OpenLayers.Size(100, 100),
 content,
 null, true, close_popup);
 feature.popup = popup;
 popup.feature = feature;
 map.addPopup(popup);
 }

 // 他のマーカーをクリックしたり、関係ないところをクリックしたときに、吹き出しを消す
 function erase_popup(evt) {
 var feature = evt.feature;
 if (feature.popup) {
 popup.feature = null;
 map.removePopup(feature.popup);
 feature.popup.destroy();
 feature.popup = null;
 }
 }

 // ページの読み込みが終わったら、地図表示の処理を行う
 window.addEventListener("DOMContentLoaded", display_map);

})();
</script>

 <?php else: ?>
 該当する店舗はありませんでした。
 <?php endif; ?>

<?php else: ?>
地域を入力してください。
<?php endif; ?>

<!-- ★ スタイルの調整 -->
<style>
/* 地図領域と地図のサイズが合わないとき : Google Maps は API が設定する */
#map {
 position: relative;
 overflow: hidden;
}
/* style.css の指定が影響して、吹き出しが正しく表示されない */
#map .olPopup img {
 max-width: none;
}
</style>

修正した量は多いですが、大きく四ついじってます。

マーカーの画像は http://dev.openlayers.org/img/ のものを使ってますが、自サイトに用意した方が良いと思います。

Google Maps API を使ってたときと違うところ。

マーカーをクリックしたときの動作は変更できると思いますが、以前の質問の回答でも書いたような記憶がありますが、この辺は好みなので、こちらの動作でも良いかな、とは思います。

吹き出しの見た目は画像ファイルを使っているので、これを修正すると変更できそうな気がします。

Marker Cluster は、いくつかやり方がありそうなのですが、うーんって感じになってます。

検索結果が含まれる範囲を適切にズーミングできれば、必要ないんじゃないか、という言い訳をしてみたり :-)


気に食わないところは言ってください。
直せそうなら、直します。


以下、参考にしたページです。


ykhpno1さんのコメント
素晴らしい回答をいただきありがとうございました。ダントツに、抜群に、超ベストアンサ?とさせていただきます。 現在、テストサイトにて登録している各店舗ペ?ジ(post)にもマップを表示させておりまして、それはすごく原始的なコ?ドでグ?グルマップを表示させておりまして、 それだけにこちらのコ?ドもオ?プンストリ?トマップに変更するコ?ドがあれば大変勉強になると思いまして、お手数ながらこちらも教えていただければ嬉しいです。 店舗ペ?ジ(post)のマップは、何の機能もさせていませんので純粋にマップの書き換えのみを勉強したい場合の初級にうってつけになると思うのです。 もしお手すきのお時間がある折があればお願いしたいです。 マーカーをクリックしたときの動作は変更できると思う、とおっしゃっていただきありがとうございます。 これは私の好みなのですが、グ?グルマップの時と同じく、 ・吹き出しをいくつでも表示できて、吹き出しを表示中のマーカーをクリックすると閉じる であれば嬉しいです。 (仕様上、ムリもしくはややこしい、であれば現状のもので同等に好ましく思っております) 回答のために多くの時間を割いていただいているのが手に取るようにわかり恐縮しております。 色んなサイトを巡回していただきコ?ドを書いていただきました。 本当にありがとうございました。 これでサイトをリニュ?アルできる目星がつき、本当に嬉しいです。 今回に限らず、いちから十までa-kuma3さんにお世話になりました。 もしa-kuma3さんから回答をいただけなければ全てが絵に描いた餅になるところでした。 ありがとうございました。深く感謝しております。

a-kuma3さんのコメント
投稿ページの地図を OpenStreetMap に変更するのは、すぐにできると思います。 >> 店舗ペ?ジ(post)のマップは、何の機能もさせていませんので純粋にマップの書き換えのみを勉強したい場合の初級にうってつけになると思うのです。 << Google Map → OpenStreet Map への書き換えは需要がありそうだから、まとめたページがあるんじゃないかと思って探してみたんですが、期待していたようなものは見つからず。 マーカーを配置してクリックしたら吹き出しを表示、というのでも、それぞれで色々なやり方があるので、ここの要素を対応づけるようなことはやりづらいのだろうな、とは思います。 マーカーをクリックしたときの動作を変更する方は、ちょっとお悩み中。 マーカーの表示に Vector というのを使っているのですが、Marker を使えば良いんだろうな、とか思いながら、Vector を使うやり方の方が新しいやり方でそちらを推奨みたいなことを書いてあるページもありまして。

a-kuma3さんのコメント
single.php は、こんな感じになりました。 >|javascript| window.addEventListener("DOMContentLoaded", function() { // 緯度、経度 var lat = <?php echo post_custom("lat")?>, lng = <?php echo post_custom("lon")?>; // 地図の中心位置 var epsg4326 = new OpenLayers.Projection("EPSG:4326") var epsg3857 = new OpenLayers.Projection("EPSG:3857") var pos = new OpenLayers.LonLat(lng, lat).transform(epsg4326, epsg3857); // 地図 var map = new OpenLayers.Map("map", { layers: [ new OpenLayers.Layer.OSM() ], center: pos, zoom: 17, }); // スケールライン map.addControl(new OpenLayers.Control.ScaleLine({bottomOutUnits: "", bottomInUnits: ""})); // マーカー var markers = new OpenLayers.Layer.Markers("Markers"); map.addLayer(markers); var size = new OpenLayers.Size(21,25); var offset = new OpenLayers.Pixel(-(size.w/2), -size.h); var icon = new OpenLayers.Icon('http://dev.openlayers.org/img/marker.png', size, offset); var marker = new OpenLayers.Marker(pos, icon); markers.addMarker(marker); }); ||< 地図を表示している &lt;script&gt; の中がバッサリと入れ替わって、後は、ライブラリの読み込みを変更して、スタイルの調整をちょっとだけ追加です。 以下について書いてあげなければいけない分、Google Map に比べると、ちょっとコードが長くなります。 - 座標変換が必要 - G は、マーカーの生成時に地図と紐づけるが、O はレイヤーと地図がひもづいていて、レイヤーに対してマーカーを登録する - マーカーは、画像の左上と位置が一致する スケールラインも、デフォルトだと ft が表示されたりと、何かと英語圏仕様だったり。 参考にしたところ。 http://bl.ocks.org/bentrm/6aae74f552cb073c7cb6 http://dev.openlayers.org/docs/files/OpenLayers/Marker-js.html http://dev.openlayers.org/docs/files/OpenLayers/Control/ScaleLine-js.html # OpenLayer API がちょっと分かってきた気になってます <tt>:-)</tt>

ykhpno1さんのコメント
店舗(post)用のマップまでも対応いただきましてありがとうございます! これからサンプルコ?ドも見つつ、上記のコ?ドで勉強させていただきます、ありがとうございます!! 些少ながら追加ポイントを送信させていただきました。 ポイント反映に時間がかかるかもしれませんがご寛恕くださいませ。

a-kuma3さんのコメント
>> マーカーをクリックしたときの動作を変更する方は、ちょっとお悩み中。 << なんか、できちゃいました。 マーカーをクリックしたときのイベントの種類を変えたのと、それに合わせて、表示/非表示を切り替えるような処理にまとめただけです。 >|javascript| // ★ これ以降、OpenLayers API を使うように、ばっさりと書き換え var map; var select; function display_map() { // マーカーとツールチップを、店舗情報毎に設定するための overlay var overlay = new OpenLayers.Layer.Vector('Overlay', { styleMap: new OpenLayers.StyleMap({ externalGraphic: '${marker_image}', graphicWidth: 21, graphicHeight: 25, graphicYOffset: -25, cursor: "pointer", title: '${tooltip}', }) }); var icon_map = { 2: "http://dev.openlayers.org/img/marker.png", 3: "http://dev.openlayers.org/img/marker-blue.png", 4: "http://dev.openlayers.org/img/marker-gold.png", 5: "http://dev.openlayers.org/img/marker-green.png", }; var epsg4326 = new OpenLayers.Projection("EPSG:4326"); var epsg3857 = new OpenLayers.Projection("EPSG:3857"); // マーカーの生成 var features = []; for (var i in posts) { var post = posts[i]; features.push(new OpenLayers.Feature.Vector( new OpenLayers.Geometry.Point(post.lng, post.lat) .transform(epsg4326, epsg3857), { tooltip: post.title, marker_image: icon_map[ post.cat_id ], post: post, } )); } overlay.addFeatures(features); overlay.events.on({ 'featureclick': function(evt) { toggle_popup(evt.feature); }, }); // マップの生成 map = new OpenLayers.Map("map"); map.addLayers([new OpenLayers.Layer.OSM(), overlay]); // マーカーのクリック状態を取得するために、SelectFeature なるものを作る select = new OpenLayers.Control.SelectFeature(overlay); map.addControl(select); select.activate(); // マーカーが含まれる範囲の Bounds と、それに合わせたズーミング var bounds = new OpenLayers.Bounds(); for (var i in posts) { bounds.extend(new OpenLayers.LonLat(posts[i].lng, posts[i].lat)); } bounds.transform(epsg4326, epsg3857); map.zoomToExtent(bounds); // ズームの最大値は 16 まで if (map.getZoom() > 16) { map.zoomTo(16); } } // 吹き出しの「×」を押したときの処理 function close_popup(evt) { toggle_popup(this.feature); } // マーカーをクリックしたときに吹き出しの表示を切り替える function toggle_popup(feature) { if (! feature.popup) { var post = feature.attributes.post; var content = '<div>' + post.name + ':' + '<a href="' + post.link + '">' + post.title + '</a></div>'; var popup = new OpenLayers.Popup.FramedCloud("featurePopup", feature.geometry.getBounds().getCenterLonLat(), new OpenLayers.Size(100, 100), content, null, true, close_popup); feature.popup = popup; popup.feature = feature; map.addPopup(popup); } else { var popup = feature.popup; // popup.feature = null; map.removePopup(feature.popup); feature.popup.destroy(); feature.popup = null; } } // ページの読み込みが終わったら、地図表示の処理を行う window.addEventListener("DOMContentLoaded", display_map); ||< OpenLayers のドキュメント しょぼい。 使える Event の一覧があれば、もっと早くできたのに。 そんなところも OSS っぽい(面白いけど) <tt>:-)</tt>

ykhpno1さんのコメント
これは! 厚かましいお願いを実装していただいてますね!仕様で、もうダメなんだろうなと思っておりました。 ここまでくれば「吹き出しが出ているマ?カ?を再クリック」でその吹き出しが消えてほしい、というド厚かましさでお願いしたいです! 再度ポイントを追加させていただきます。ありがとうございました!!

a-kuma3さんのコメント
>> ここまでくれば「吹き出しが出ているマ?カ?を再クリック」でその吹き出しが消えてほしい << そういうふうには、してるつもりなんですけどね。 さわってて気が付いたのは、吹き出しの髭の部分は、透明ですけどその横の部分も吹き出しの領域で。 マーカーよりも上の方に吹き出しが表示されたときには、吹き出しがマーカーを覆い隠してるんです。 マーカーの上にマウスカーソルを持ってきたときには、手のかたちのカーソルに変えてるのですけれど、そうなったときには手のカーソルにならない。 クリックしても、マーカーではなく、吹き出しをクリックしてることになってるみたいで。 どうにかできるのかなあ、これ……

ykhpno1さんのコメント
なるほど、これはもう仕様ですね。 現状で十二分に満足しております!本当にありがとうございました!! m(_ _)m

a-kuma3さんのコメント
>|javascript| popup.calculateRelativePosition = function() { return "bl"; }; ||< この一行を追加すれば、マーカーの位置に寄らず、その下に吹き出しを表示するようになります。 ちょっとかっこ悪い感じもしますが、吹き出しを下に表示することで、常にマーカーをクリックすることができます。 # いまいち (´・ω・`)

ykhpno1さんのコメント
テストサイトで見させていただきました! 完璧な動作で喜んでおります。いまいちとかとんでもない、素晴らしい機転で対処いただきました! この質問においてa-kuma3さんからいただいた回答は、私はもちろん、以後グ?グルマップからオ?プンストリ?トマップに乗り換えたい方に大きな力になると思います。本当にすごいです。 素晴らしい回答をいただきありがとうございました。 本当に感謝しております。

a-kuma3さんのコメント
ポイント、届きました。 専用ID って <tt>:-)</tt>

ykhpno1さんのコメント
m(_ _)m もう本当に頭があがらないです。 ありがとうございました。 わざわざのご連絡にも感謝しております。 もう言葉もありません。

a-kuma3さんのコメント
>> もう本当に頭があがらないです。 << これは、そんなに気にすることなくって、Q&amp;A サイトの質問者と回答者のやり取りですから、聞きたいことがある→それに答えるやつがいた、というだけのことなので。 ポイントもいっぱいもらってますし。 ブログのネタにもなりますし。 何より、プログラムをいじってるの楽しいですし。 回答を書いてるときは、サンプルをこなすだけで精いっぱいだったのですが、見返してみると OpenLayer API って、バージョンが 2 → 3 になってて、ぼくが回答したのは、古い方の V2 のライブラリと使い方だというのを、今更ながらに気が付きまして。 OSS なので、旧バージョンが手に入らなくなる、ということは、当面ないとは思いますが。

ykhpno1さんのコメント
そう言っていただけると有難いです。 山ほどの教材をいただいた思いでして、楽しみつつ勉強していこうと思います。 さっそく今も手掛けていただいたコ?ドをいじりつつ勉強させていただいております。 ありがとうございました。 ところでもしご存じでしたら教えていただきたいのですが、吹き出しの中のリンクを別窓(blank)で開く方法をご存じでしたら教えていただけませんでしょうか。 調べたところ、グ?グルマップでは仕様上、できなさそうなのです。 https://productforums.google.com/forum/#!msg/maps-ja/7wCFsWlCSPw/C40eyWXhvRkJ で、オ?プンストリ?トマップではどうなのかと思い、調べているのですが、いかんせん情報が少なく、仕様上の問題で無理だから情報がないのか、それとも検索方法が悪いのかでグルグルしているのです。 まぁきっとできないからでしょうね。

a-kuma3さんのコメント
>> 吹き出しの中のリンクを別窓(blank)で開く方法をご存じでしたら教えていただけませんでしょうか。 << ポップアップに表示する内容は、HTML で直に書いているので、そこを変更すれば大丈夫です。 >|javascript| // マーカーをクリックしたときに吹き出しの表示を切り替える function toggle_popup(feature) { if (! feature.popup) { var post = feature.attributes.post; // ★この辺り var content = '<div>' + post.name + ':' + '<a href="' + post.link + '" target="_blank">' + post.title + '</a></div>'; var popup = new OpenLayers.Popup.FramedCloud("featurePopup", ||< # コメントでは、見切れているかな テストサイトの方も修正しました。 この辺りは、Google Maps API でも同じはずです。 コメントで張ったヘルプフォーラムの投稿で言ってるのは、「マイマップ」という、プログラムなしでマーカーや図形を書いたりする機能についての話だと思います。

a-kuma3さんのコメント
># コメントでは、見切れているかな var content への設定内容を変えてます。

ykhpno1さんのコメント
アチャ-(*/ω\*) お恥ずかしい・・。

ykhpno1さんのコメント
昨日から勉強のためにa-kuma3さんに手掛けていただいたコ-ドを参考にしつつ、いっっちばん最初に使っていた、何の機能もついていないグ?グルマップの表示をオ?プンストリ?トマップにしようとしています。 絞り込み機能がついたペ?ジを材料に、グ?グルマップ→オ?プンストリ?トマップに変換するのは少々複雑で、まずはもう一段階レベルを落とした原始的コ?ドからの変換が必要だと感じたからなのですが、このレベルでもオ?プンストリ?トマップにしようとすると、マップ全体が灰色になってしまって手詰まりになってしまいます。 ポイントをお支払いさせていただきますのでこの原始的なグ?グルマップをもオ?プンストリ?トマップに変換していただけませんでしょうか。 問題のマップ http://eiji3.wp.xdomain.jp/more/ moretest.php(moretest固定ペ?ジテンプレ?ト)というファイルにて勉強しております。 こちらのファイルは自動ズ?ム機能や、マップの中心点が自動に決まる機能もついておらず、以下のようなカスタムフィ-ルドから値を拾っております。 centerlat マップの緯度 centerlng マップの経度 zoom マップの縮尺 displaycategory マップに表示させたいカテゴリ?のカテゴリ?スラッグ tagsname マップに表示させたいタグのタグスラッグ これを、この原始的なままマップのみを変更したいのです。 完全に、私の勉強のための教材作りみたいなノリになっており、申し訳がないのですがなにとぞお願いいたします。 まったく急いでおりませんのでお時間のある折、気が向くことがもしあれば。。。m(_ _)m

a-kuma3さんのコメント
>> 私の勉強のための教材作りみたいなノリになっており << これについては、全く問題ないのですが、前に牛乳先生が回答してたように、対象の moretest.php は、マップを表示する javascript のコードと、投稿からデータを抜き出す php のコードが混じってて、何か問題があったときに、原因を切り分けにくいんです。 php のコードは、javascript で扱えるデータを作るだけにして、ソース上は一ヶ所に集めておく。 できあがったデータの塊を、マップを表示する javascript で扱う。 というふうに切り分けたのが、最後の Google Maps API を使う page.php だったり、この回答で書いた page.php だったりします。 対象の moretest.php で実装している機能に合うように、page.php から機能をそぎ落とす、というのがひとつの方法。 ただ、ループの位置とかが変わるので、元の moretest.php と比較して、Google Map と OpenStreet Map の違いを知る、という意味では、余計な差異があることになります。 今の moretest.php の形に極力合わせて、OpenStreet Map を使えるようにする、というのを期待されているような気もします。 先に書いた理由からやりづらい、というのを別にしても、マーカーや吹き出しの表示の仕方が違うので、今のマーカーと吹き出しを作る処理を、php のループで行う、というのがやりづらいんです。 さて、どうしましょうか。

ykhpno1さんのコメント
なるほど、そういったことがあるのですね。 様々な機能を実装していただいた方のものが私が欲しかった完成形で、それを理解(勉強)するための、足がかりのステップが欲しいなと軽く、単純に思ってしまっていて、そういったやりづらさ等の問題があると思い至らずでした。 稼働させるための成果物としては欲していなかったため、そのあたりの気配りが希薄だったようです。 申し訳ありません、お気を悪くされませんように。 すでに、私の欲しかった完成形は手掛けていただきましたので、時間をかけつつ、ここに至る過程を地道に勉強していきたいと思います。 ありがとうございました!

a-kuma3さんのコメント
この質問で回答した、page.php を変更した箇所の対比とかは、気が向いたらブログにでも載せようかと思っているので、もし書けたらコメントします。 # いつのことになるやら、という感じですが <tt>:-)</tt>

ykhpno1さんのコメント
はい、その際にはテストサイトをどんどん使ってください。 a-kuma3のブログ、もし差しさわりがないようでしたらURLを教えていただけませんでしょうか。 私も購読したいです。

a-kuma3さんのコメント
書くとしたら、はてなブログに書くと思うので、プロフィールからたどれます。 http://a-kuma3.hatenablog.com/ 書き散らかしてるだけなので、何だこりゃ感が満載ですが <tt>(^^;</tt> >> はい、その際にはテストサイトをどんどん使ってください。 << ラッキー<tt>♪</tt> >|| レベルが上がりました。 a-kuma3 は、WordPress の実行環境を手に入れた。 ||<

ykhpno1さんのコメント
さっそくながら、「チェックボックスと画像を連動」とかを興味深く読ませていただきました。 これからもちょくちょく読ませていただきます。 あと、上のコメントでa-kuma3さんをよびすてにしちゃってましてごめんください。 数字の3が私を惑わせるのです(笑)。 ありがとうございましたm(_ _)m

a-kuma3さんのコメント
そうです。 呼び捨てでも敬称付きという。 そういう ID です <tt title="わざとやってます">:-)</tt>

ykhpno1さんのコメント
いつもお世話になっております。 先日、コメント上にて、マップ部分のみをグ?グルマップからオ?プンストリ?トマップに変更したい旨、書かせて頂いた件ですが、これがちょっと必要になってきまして、ご指摘いただいたようにややこしい部分があるのは承知しつつも、なんとかお願いできないでしょうか。 もし可能ということでありましたら、先に教えていただいた、「対象の moretest.php で実装している機能に合うように、page.php から機能をそぎ落とす、というのがひとつの方法」の形でお願いしたいのです。 ポイント送信という形をとらせていただきたく、もし可能であればなにとぞよろしくお願いいたします。 先のコメントにも書かせていただきましたが、以下もう一度記載させていただきます。 こちらのマップ http://eiji3.wp.xdomain.jp/more/ moretest.php(moretest固定ペ?ジテンプレ?ト)というファイルを読み込んでおります。 こちらのファイルは自動ズ?ム機能や、マップの中心点が自動に決まる機能もついておらず、以下のようなカスタムフィ-ルドから値を拾っております。 centerlat マップの緯度 centerlng マップの経度 zoom マップの縮尺 displaycategory マップに表示させたいカテゴリ?のカテゴリ?スラッグ tagsname マップに表示させたいタグのタグスラッグ lat 店舗の緯度 lon 店舗の経度 Name 業種名 これらのカスタムフィ-ルドから値を詠み込みつつ、オ?プンストリ?トマップで表示をしたいです。

a-kuma3さんのコメント
moretest.php をいじってみました。 page.php から機能を省く方が簡単とか書きましたが、取りこぼしが恐いなあ、というのもあるので、一旦、Google Maps API を使う状態で php と javascript のコードを分離するように書き換えて動作確認した後に、OpenLayers API に移行しました。 だいたい移植できたと思うのですが、マーカーが密集しているところをクリックすると、複数のマーカーをクリックしたことになり、吹き出しが同時に複数表示されたりしちゃいます。 OpenLayers API のよくあるサンプルで、吹き出しがひとつだけ表示されるタイプの書き方だと、一番上に表示されているものだけを表示できるのですが。 マーカーのクラスタリングについては、できそうな気配もあるのですが、まだそこまでたどり着いていません <tt>(^^;</tt>

ykhpno1さんのコメント
さっそく手掛けていただいてありがとうございます。 本当に素晴らしい腕力でらっしゃいます。 機能を省く方式ではなく書き換え、動作確認までいただいてるのですね。 恐縮しつつも嬉しいです。ありがとうございます。 トップページ(多機能版)と同じく、マウススクロールでの拡大縮小ができれば有り難く、拡大することで密集地のマーカーが分散される、という形が私としては望ましいです。

a-kuma3さんのコメント
>> マウススクロールでの拡大縮小ができれば << page.php でも、特に意識してないのですが、どんな操作を想定してますか?

ykhpno1さんのコメント
トップペ?ジ(page.php)では、検索条件を入れればその条件に応じた店舗がマップ上に表示され、そのマップ上で、マウスホイ?ル(コロコロ)で拡大縮小ができますよね。これがmoretest.phpでもできれば、密集地近くで拡大することでクリックしたいマ?カ?がばらけて、クリックできるようになる、という操作を想定しております。

a-kuma3さんのコメント
普段、マウスを使わないので、全然 気が付きませんでした。 縮尺のスケールラインの指定の仕方で、マウスホイールの拡縮が効いたり、効かなかったりするみたいで。 # page.php では、スケールラインを入れてないし moretest.php を修正したので、確認してみてください。

ykhpno1さんのコメント
ありがとうございます! これで完璧な動作になりました。ありがとうございます!! 本当に最後までおつきあいいただきました、本当に助かりました! ポイント送信に時間差がでるのはご寛恕くださいませ。 助かりました。 いつもお世話さまですm(_ _)m

a-kuma3さんのコメント
できる/できないの条件がはっきりしているので、それほど苦労しませんでした。 こういうのも含めて、面白いなあと思います。 # マウス、久しぶりに使った <tt>:-)</tt>

ykhpno1さんのコメント
そういったa-kuma3さんの開発舞台裏みたいなのも興味深いですね>マウス久しぶり ブログにもそういった方面(使用PCだとか)の記事を期待しています :-)
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ