ＱＲコードの作成&GoogleMap

授業

Google Map API

必ず緯度・経度の数字が必要になります。緯度経度検索サイトがあるので、わからなければそこで調べましょう。

【リンクで貼る方法】

リンクの中の緯度・経度の数字を変えるだけで簡単に表示できます。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Google Map Test</title>
</head>
<body>
<h1>google mapで位置表示する</h1>
<p>緯度と経度を取得し、代入することで、どんな地図もgoogle mapで表示が可能です！</p>
<a href="http://maps.google.com/maps/api/staticmap?center=35.728926,139.71038&zoom=16&size=600x400&maptype=roadmap&sensor=false">マップで見る</a>
</body>
</html>


【Javascriptで表示】

位置情報だけでなく、マーカーをつけたり、マーカーにコメントを表示できます。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Google　Maps　API</title>
<!-- 【1】Google Maps APIを呼び出し-->
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=true&language=ja"></script>

<!--【2】どんな地図を描くかのメイン処理 -->
<script type="text/javascript">

// ■地図初期化し表示
function initialize(){
	
// ■地図を表示する緯度経度を指定する
var latlng = new
google.maps.LatLng(35.681382,139.766084);

// ■地図	必須プロパティを設定
var myOptions ={
	
// ■ズームレベルの指定０〜１７
zoom: 15,

// ■地図	の中心を指定（上記で設定の緯度経度latlng）
center: latlng,

// ■地図	タイプ設定
//  ROADMAP:デフォルト、SATELLITE:写真タイル、HYBRID：写真タイルと主要な機能、TERRAIN：物理的な起伏を示すタイル
mapTypeId:google.maps.MapTypeId.ROADMAP

};//地図プロパティここまで


//■<div id="map_canvas">と結びつけて、その領域に地図を描く
var map= new
google.maps.Map(document.getElementById("map_canvas"),myOptions);

// ■中心にマーカーの表示
var marker1= new google.maps.Marker({
	position: latlng,
	title:"東京駅"
});
marker1.setMap(map);


//■マーカーの追記表示（緯度経度指定の場合）
var myLatlng = new google.maps.LatLng(35.685326,139.7531);
var marker2 = new google.maps.Marker({
	position: myLatlng,
	title:"皇居"
});
marker2.setMap(map);

//	■マーカーをクリックしたら、情報ウィンドウを表示
var marker1text = 'ここは<span style="color:#f00;">東京駅</span>です'
var infowindow1 = new google.maps.InfoWindow({
	content:marker1text,
	maxWidth:200
});
google.maps.event.addListener(marker1,'click',function()
{
	infowindow1.open(map,marker1);
});

var marker2text ='ここは<span style="color:#f00;">皇居</span>です'
var infowindow2 = new google.maps.InfoWindow({
	content:marker2text,
	maxWidth:200
});
google.maps.event.addListener(marker2,'click',function()
{
	infowindow2.open(map,marker2);
});

}//initialize()


</script>
</head>
<body onload="initialize()">

 <!-- 地図はここに描画される  -->
 <div id="map_canvas" style="width:640px; height:480px;"></div>

</body>
</html>


QRコードの作成

htmlとPHPを使って作ります。

【qrcode.html】

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>QRコード作成</title>
<style>
body{
text-align:center;
}
</style>
</head>
<body>
<p>QRコードにしたい文字を入力してください。</p>
<form action="qrcode.php" method="get">キーワード：<input type="text" name="keyword" size="40">
<input type="submit" value="作成">
</form>
</body>
</html>


【qrcode.php】

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>QRコード作成サイト</title>
<style>
body{
text-align:center;
}
</style>
</head>
<body>
<p>生成されたＱＲコード</p>
<?php
$keyword = $_GET["keyword"];
$keywordurl = urlencode($keyword);
$url="http://chart.apis.google.com/chart?chs=150x150&cht=qr&chl=$keywordurl";
?>
<img src="<?php echo $url; ?>">

<!-- ダウンロード用ボタン -->
<form method="get" action="download.php">
	<input type="hidden" name="url" value="<?php echo $url?>">
	<input type="submit" value="QRコード画像をダウンロード">
</form>

</body>
</html>

【download.php】

生成したQRコードをダウンロードするPHPだけど、うまく反応しなかった・・・

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<?php
$file = $_GET["url"];

$fullpath = $file;
$filename = 'qrcode.png';

header("Content-type: image/png");
header('Content-Disposition: attachment; filename="' . $filename . '"');

readfile($fullpath);
?>
</body>
</html>