web-dev-qa-db-ja.com

GPS座標に基づいてGoogleマップをHTMLページに埋め込む

PHP画像からGPS座標を読み取るフォトギャラリーがあります。座標を使用するように修正し、写真ページにGoogleマップを含めます。簡単な方法はありますか？この情報のペアのみを指定して、HTMLページにGoogleマップを表示しますか？

ありがとう。

phpgoogle-maps
22
ensnare

以下は、開始時に役立ついくつかの例です。

Google Maps API v2 を使用：

_<!DOCTYPE html>
<html> 
<head>
   <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false" 
           type="text/javascript"></script>
</head> 
<body onunload="GUnload()">
   <div id="map" style="width: 400px; height: 300px"></div> 

   <script type="text/javascript"> 
      var map = new GMap2(document.getElementById("map"));
      map.setCenter(new GLatLng(51.49, -0.12), 8);
   </script> 
</body> 
</html>
_

GMap2.setCenter()メソッドで緯度と経度を変更するだけです。最後のパラメーターはズームレベルです。

Google Maps API v を使用：

_<!DOCTYPE html>
<html> 
<head>
   <script type="text/javascript" 
           src="http://maps.google.com/maps/api/js?sensor=false"></script>
</head> 
<body>
   <div id="map" style="width: 400px; height: 300px"></div> 

   <script type="text/javascript"> 
      var myOptions = {
         zoom: 8,
         center: new google.maps.LatLng(51.49, -0.12),
         mapTypeId: google.maps.MapTypeId.ROADMAP
      };

      var map = new google.maps.Map(document.getElementById("map"), myOptions);
   </script> 
</body> 
</html>
_

Maps APIのバージョン3を使用するときは、パラメーターをオプションとしてgoogle.maps.Map()コンストラクターに渡す必要があります。上記の例は自明です。

Static Map API の使用：

_<img src="https://maps.google.com/maps/api/staticmap?center=51.49,-0.12&zoom=8&size=400x300&sensor=false" style="width: 400px; height: 400px;" />
_

静的マップAPIlucaが推奨 は非常に良いアイデアかもしれません。

上記の例のように、緯​​度と経度のパラメータをイメージタグで渡すだけです。以下のマップを、Googleから直接レンダリングして表示します。

Using the Static Maps API

40
Daniel Vassallo

他の追加情報のみを提供する必要がある静的なGoogleマップを使用する

http://maps.google.com/maps/api/staticmap?center=51.477222,0&zoom=14&size=400x400&sensor=false

地図の画像のみを表示します

ここにAPIへのリンクがあります

https://developers.google.com/maps/documentation/maps-static/intro

必要に応じて他の多くのオプションがあります

3
Luca Rocchi

PHPを使用しているため、 PHP Google Map APIクラス も使用できます。これも、Google Maps JS APIのV3を使用するように更新されました。

1
streetlogics