MULTISOUP

MULTISOUP

MULTISOUP

Staff Blog

Introduction example

2019.04.07

Static Maps に自前でマーカーとラベルを描く

maps_static_api_custom

みなさん、こんにちは。

静的な地図画像を取得するには、Maps Static API を利用しますよね。

その際、地図上に好きなマーカーを描画したり、ラベルを描画したいという要望がよくあります。

 

標準機能でもマーカーを描画したり、ラベルを描画したりできるのですが、あまりカッコ良い形にはなりません。

そこで、プログラムを使って地図画像上にマーカーやラベルを描画する方法を紹介したいと思います。

 

一番の課題は、緯度経度から画像上のピクセル座標に変換する点ですかね。それさえクリアできれば、画像上にマーカー画像やラベルの文字を描画するだけなので、難しくありません。

ちなみに標準のAPIでも、カスタムマーカーを描画することはできますが、同時にラベルを描画することができません。

 

https://maps.googleapis.com/maps/api/staticmap?key={API_KEY}&center=35.7,139.7&size=640×400&zoom=16&markers=icon:https://maps.multisoup.co.jp/exsample/common/img/pin01.png|35.7,139.7|35.701,139.701

 

staticmap4

 

 

PHPで地図上のピクセル座標を取得するサンプルです。地図は幅640、高さ400、ズームレベル16としています。

地図の中心は、「緯度: 35.7, 経度: 139.7」、マーカの位置は「緯度: 35.701, 経度: 139.701」です。

// 経度(X)方向の座標
function lonToTile($lon, $zoom) {
    return (($lon + 180) / 360) * pow(2, $zoom);
}

// 緯度(Y)方向の座標
function latToTile($lat, $zoom) {
    return (1 - log(tan($lat * pi() / 180) + 1 / cos($lat * pi() / 180)) / pi()) / 2 * pow(2, $zoom);
}

// ズームレベル
$zoom = 16;
// 地図画像の幅
$width = 640;
// 地図画像の高さ
$height = 400;
// 地図画像上の経度(X)のピクセル位置
$centerX = lonToTile(139.7, $zoom);
$targetX = lonToTile(139.701, $zoom);
$x = floor(($width / 2) - 256 * ($centerX - $targetX));

// 地図画像上の緯度(X)のピクセル位置
$centerY = latToTile(35.7, $zoom);
$targetY = latToTile(35.701, $zoom);
$y = floor(($height / 2) - 256 * ($centerY - $targetY));

 

 

実際のマーカーの描画方法です。Maps Static API で地図を取得後、同じサイズの新しい画像を作成しコピーします。その後、マーカー画像を取得し、適切な位置に描画します。

 

// Static Maps を取得
$map = file_get_contents("https://maps.googleapis.com/maps/api/staticmap?key={API_KEY}&center=35.7,139.7&size=640×400&zoom=16");
$mapImage = imagecreatefromstring($map);

// 新しい画像を作成
$newImage = imagecreatetruecolor($width, $height);

// 新しい画像に地図画像をコピー
imagecopy($newImage, $mapImage, 0, 0, 0, 0, $width, $height);

// マーカー画像を取得
$markerImage = imagecreatefrompng("marker.png");

// マーカー画像が64pxなので位置を調整
$x1 = $x - 32;
$y1 = $y - 32;

// 新しい画像にマーカーを描画
imagecopy($newImage, $markerImage, $x1, $y1, 0, 0, 64, 64);

 

 

作成した地図画像は以下のとおりです。マーカーの下にテキストも描画してみました。上記のAPIで作成した地図のマーカー位置とほぼ同じになりました。

custom_staticmap

 

 

 

いかがでしょうか? 

自前でマーカーやテキストを描画できれば、自由度はあがりますね。

なお、注意点ですが、必ずGoogleの著作権表示は消さないでください。怒られます。

Google の Static Map だけではなく、他の地図画像でも緯度経度と画像サイズがわかれば利用できるはずです。

お試しください。

 

 

バイ!

 

 

 

 

 

 

 

 

 

 

 

【関連記事】こんな記事も読まれています

2016.08.25

Googleマップで過去の航空写真を見る

みなさん、こんにちは。

国土地理院が提供するタイル地図とGoogleマップの連携方法を説明します。

今回は、Googleマ・・・

続きを読む

2017.01.16

東京の花粉量をヒートマップで可視化する

みなさん、こんにちは!

Google Maps JavaScript API のライブラリには、データ可視化ライブラリ(visualiza・・・

続きを読む

2017.12.17

マーカーにスタイルを適用してラベルを描画する

みなさん、こんにちは。

今回は Google Map JavaScript API でマーカーを描画する際に、スタイルを適用したラベルの描・・・

続きを読む

 - Google StaticMaps API