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 だけではなく、他の地図画像でも緯度経度と画像サイズがわかれば利用できるはずです。

お試しください。

 

 

バイ!

 

 

 

 

 

 

 

 

 

 

 

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

2017.06.24

ジオメトリライブラリを使って距離や面積を算出する

みなさん、こんにちは。
Google Maps JavaScript API を使用して2点間の距離やエリアの面積を計算する方法をご存知ですか・・・

続きを読む

2017.10.28

GoogleマップにFusion Tablesを使ってマーカーを7万個描画する

みなさん、こんにちは。

今回は、Google  Fusion Tables にデータを登録し、Google Maps JavaScript A・・・

続きを読む

2016.12.22

未来の交通状況を考慮したルート検索

みなさん、こんにちは。

 

Google Maps API では、指定した日時の交通状況を予測したかたちでルート検索を行・・・

続きを読む

 - Google StaticMaps API

お問い合わせお見積もりから開発のご相談まで、お気軽にお問い合わせください。

Google Maps for Work™に関するご質問やお見積りは、
マルティスープまでお気軽にお問い合わせください03-3518-9013 (受付時間:平日 9:00−18:00)