コンテンツ制作のこと: 2014年4月アーカイブ

20140410_map2.jpg

今、自分がいる場所を中心にしたマップを表示するのも、HTML5 の Geolocation API が使えると楽勝やね。

Google Maps API キーっていらんのんよね?」というエントリーに載せてる HTML ソースの script のところを、

<script type="text/javascript">

function initialize() {
navigator.geolocation.getCurrentPosition(successCallback, errorCallback);

function successCallback(position) {
map_set(position.coords.latitude, position.coords.longitude);
}

function errorCallback(error) {
//とりあえず何もしない
}

}

function map_set(latitude, longitude) {
var latlng = new google.maps.LatLng(latitude, longitude);
var opts = {
zoom: 18,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), opts);
}
 
  </script>

っていう具合に直すだけや。

google.maps.LatLng に固定値をセットしてたのを、position.coords.latitude, position.coords.longitude をセットするように修正しただけ。

そう言えば、

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

の sensor は false のままだけど、これってどういう時 true にするんだろう?
Geolocation API みたいなのを Google でも用意してて、true にしたらそれが使えるんかなあ???
一回いらんて話になって、それからまたいることになったような気がしてたんだけど、API キー無しで Google Maps の JavaScript 読み込んでも特に問題ないみたいなんだけど・・・

またいらなくなったんかね?

<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>地図テスト</title>
<meta name="description" content="テストです">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(34.397557, 132.448014);
var opts = {
zoom: 18,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), opts);
}
  </script>
</head>
<body onload="initialize()">
<p>十日市周辺地図</p>
<div id="map_canvas" style="width:500px; height:300px"></div>
<footer>
<p>&copy; Copyright by shinoda</p>
</footer>
</body>
</html>

これで表示されるから、API キー必要ないんだろうなあ。

このアーカイブについて

このページには、2014年4月以降に書かれたブログ記事のうちコンテンツ制作のことカテゴリに属しているものが含まれています。

前のアーカイブはコンテンツ制作のこと: 2013年5月です。

次のアーカイブはコンテンツ制作のこと: 2014年5月です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。


月別 アーカイブ

電気ウナギ的○○ mobile ver.

携帯版「電気ウナギ的○○」はこちら