Posted by アイ・エス・シーシステム事業部
on 2011年08月11日 in CMS,Google maps,WEB,WEBサービス,wordpress,便利ツール,技術


WordPressで記事投稿の際に地図表示したいなぁ~と思ったことありませんか。

そういうときにぴったりのプラグイン発見しました。

Geo Mashup
※WordPress上でインストールする際はインストール名「Geo Mashup」で検索してください。

使い方は簡単でした。
インストール後記事投稿の際にこんなフォーム?が表示されていますので地図を設定します。

記事中の表示したい箇所に
[geo_mashup_map] ※実際は [ と ] は半角記号です。
と書くとOK 地図表示されます。


該当場所を選択して 「Save」を押します。

[geo_mashup_map]
※サンプル 弊社

※参考文献:
WordPressとGoogleマップを連携させるのに便利な地図プラグイン|WordPressとGoogleマップを連携させるのに便利な地図プラグイン

Posted by アイ・エス・シーシステム事業部
on 2011年06月10日 in Google maps,JavaScript/Ajax,jQuery,WEB,WEBサービス,便利ツール,技術


HTML5 Demo: geolocation を見てやってみようと思いました。
で、ボタン押したら・・・的なことを盛りこんでみました。(ちょっとテキトーなのでソースが綺麗じゃないのはご容赦ください)

geocode サンプルはこちら

ソースはこれだっ!
[html]
<meta charset="utf-8">
<title>測位!</title>
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
var lat = "";
var lng = "";
function success(position)
{
var s = document.querySelector(‘#status’);
if (s.className == ‘success’)
{
return;
}
s.innerHTML = "ここだっ!ちがうかっ!";
s.className = ‘Success’;
var mapcanvas = document.createElement(‘div’);
mapcanvas.id = ‘mapcanvas’;
mapcanvas.style.height = ‘100%’;
mapcanvas.style.width = ‘100%’;
document.querySelector(‘#map’).appendChild(mapcanvas);
lat = position.coords.latitude;
lng = position.coords.longitude;
alert(‘Latitued: ‘+lat);
alert(‘Longitude: ‘+lng);
var url="http://maps.googleapis.com/maps/api/geocode/json?latlng="+lat+","+lng+"&sensor=false";
alert(‘Google Map API: ‘+url);
//Get Json Request Here
var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var myOptions = {
zoom: 15,
center: latlng,
mapTypeControl: false,
navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("mapcanvas"), myOptions);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title:"You are here!"
});
}
function error(msg)
{
var s = document.querySelector(‘#status’);
s.innerHTML = typeof msg == ‘string’ ? msg : "failed";
s.className = ‘Fail’;
}
//Jquery Code
$(document).ready(function()
{
$("#check").click(function()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(success, error);
}
else
{
error(‘Not supported’); //HTML Support
}
});
});
</script>
<input type=’button’ id=’check’ value=’測位!’/>
<div id="status">読込中・・・</div>
<div id="map"></div>
[/html]
※ソースは文字コードUTF-8で保存してください。

最近はGoogle様のおかげで簡単ですね。

その昔、某携帯用のナビゲーションを開発する仕事があってその際は緯度・経度の計算から地図の描画までスンゴイ計算して~ごにょごにょして~なんとか切り出した画像がこれです・・・的な感じでした。
なつかしい・・・けどたかだか6年前くらいか・・・

ページトップへ戻る

Get Adobe Flash player