スポンサードリンク

Tag Archives: Google Maps API

XMLファイルを読み込んでGoogle Mapsを表示

とても便利なXMLファイル、マーカー情報をまとめて書いてダウンロードして、Google Maps で表示させましょう。

◆用意するのは

  • XMLファイル(UTF8で記述)
  • Script記述
  • HTMLだけ

◆XML記述

<markers>

<marker lat=”37.427770″ lng=”-122.144841″/>

<marker lat=”37.433480″ lng=”-122.139062″/>

<marker lat=”37.445427″ lng=”-122.162307″/>

</markers>

Read more »

MySQL+php+XML+Clusterer2で大量多数マーカの表示。

Google Maps API PrjectサンプルでJSONファイルを読み込んでマーカーを表示するサンプルがあった。

しかし、MYSQL→JSON→Google Maps は、私素人には無理でした。そこで、MySQL+php+XML+Clusterer2で、多くのマーカーを表示させてみることに。

◆Clusterer2とは?

◆はじめに

以前にMySQL+php+XMLで地図を表示させるサンプル()を練習したので、そのScriptを書き換えることにする。

いくつかの行の追加と変更でOKなので、比較的簡単でした。

◆何はともあれ、Clusterer2.jsファイルの入手する。今回は、ここからダウンロード。 海外ブログのhereいてあるところから

Read more »

GmarkerMnager+XMLファイルで大量のマーカーを表示させてみる

さて、たくさんの大量マーカー(アイコン)を表示させる方法として、GmarkerMnagerに挑戦。

マーカー数は、約600。

ブラウザGoogle Chromeでアクセスしてみる
おっ 動く。読み出しも1秒とかからない。さくさくか?

次は、IE7でアクセス・・・・・・・おっ・・・・しかし、ズーム、地図移動がいまいち。なんとかというレベル。

これ以上マーカーが増えてたくさんになったら、多量のマーカー表示は出来そうもない。

◆GmarkerMnager+XMLファイル

作成済みXMLファイルを読み込んで、GmarkerMnagerで+XMLファイルで大量のマーカーを表示させてみることに

◆XMLファイル

ともかくUTF8で作成ね。

XMLファイルサンプル (※Google Chrome使用の方は、ページのソース表示で確認してください)

◆XMLファイルへのズームの設定とGmarkerMnagerでのマーカー表示

Read more »

ともかくGoogle Maps APIで地図を表示させる

◆Html記述

<body onload=”initialize()” onunload=”GUnload()”>

<div id=”map100″>Loading…</div>

◆script記述

<script type=”text/javascript”>
function initialize() {
if (GBrowserIsCompatible()) {
var map100 = new GMap2(document.getElementById(“map100″));
map100.setCenter(new GLatLng(35.65862, 139.74541), 9, G_NORMAL_MAP);
}
}
</script>

Read more »

マップ初期表示の地図種類を変更する

◆Google Maps APIで地図に初期表示させるマップの種類を変えてみる。 scrptの記述を変更するだけ

標準:

map.setCenter(new GLatLng(36.350527, 138.076172), 6, G_NORMAL_MAP);

航空写真:

map.setCenter(new GLatLng(36.350527, 138.076172), 6, G_SATELLITE_MAP);

航空写真+地図:

map.setCenter(new GLatLng(36.350527, 138.076172), 6, G_HYBRID_MAP);

地形:

map.setCenter(new GLatLng(36.350527, 138.076172), 6, G_PHYSICAL_MAP);

Earth:

map.setCenter(new GLatLng(36.350527, 138.076172), 6, G_SATELLITE_3D_MAP);

Read more »

Google Maps API で地図を表示する

  1. ともかくGoogle Mapsを表示させるサンプル
  2. マップ初期表示の地図種類を変更したサンプル
  3. Google Map(地図)にアイコン(マーカー)を表示させたサンプル
  4. GmarkerManager+XMLファイル読み込みサンプル
  5. YouTubeをインフォウィンドウ(info-window)に表示させる(マーカー数1:大きいインフォウィンドウ)
  6. YouTubeをインフォウィンドウ(info-window)に表示させる(マーカー数2:小さいインフォウィンドウ)
  7. PHP5 +MySQL+サイドバー(sidebar)表示サンプル
  8. PHP5 +MySQL+サイドバー(sidebar)+アイコン(マーカー)種類を変更した表示サンプル

Google Maps 地図 無料アイコンコレクションセットダウンロード!

何と900種類以上ある無料のGoogle Maps (地図)用アイコンがあります。

グーグル-マップ-アイコン

Read more »

Youtube 動画を吹き出し(情報ウィンドウ/インフォウィンドウ)に表示するサンプル/Google Maps API

Google Maps V3用はコチラ

Google Maps の地図上で、アイコン(マーカー)をマウスクリックするとYoutube 動画を吹き出し(インフォウインドウ)に表示するサンプルです。
◆HTMLサンプル

<body onload=”load();onunload=”GUnload();“>
<div id=”map100″>Loading…</div>

Read more »

マーカー(アイコン)の種類を変更する/Google Maps API

Google Maps API V3は、コチラの記事へ

アイコン・マーカの表示の変更

このサンプルマップ、マーカがただの赤い丸じゃつまらないので、Google Maps 標準アイコン(マーカー)以外にもいろいろ変更を試してみる。

Google Maps API v3は、コチラ

アイコンとマーカーの一覧表

公園以外にもいろいろ作成したい場合は、こっちのアイコン(マーカー)一覧表からコピーして変更してみて下さい。

カスタムアイコン用の影は、ここで作成できます。

HTML Script

ココでは、ただの標準マーカーだった赤いアイコンを、公園を示す緑色の木のマーカーへ変更する。

変更箇所は、赤文字部のみ

Read more »

XML形式にテーブルデータをGoogle Mapsで読み出すためのPHPファイルを作成/PHP, MySQL & Google Maps

Google Code から Using PHP/MySQL with Google MapsUsing PHP’s DOM functions to output XML 項を参照

PHP 5の場合は、 「Using PHP’s DOM functions to output XML」を参照と書いてある。
さてなんと書いてあるのか。
  1. PHPで、最初に新しいXMLドキュメントを初期化する。
  2. 「marker」親ノードを作成し、その際にデータベースに接続する。
  3. SELECT*を実行する。(すべて選択)
  4. 作成したテーブルからのデータを繰り返し引き出す。
  5. テーブル(各位置)の各行には、XML属性として行属性で新しいXMLノードを作成しておき、親ノードに追加する。
  6. 表示用XMLが生成される。
注意: utf-8で記述すること。
Read more »
2 / 3123

スポンサードリンク