世界地図を表示させ、ある国をクリックするとその国の写真のページにとぶような物を作りたいが。。。

題名そのままですが、世界地図をwebページに表示させて日本のとこをクリックすると日本のページに飛んで、ブラジルのところをクリックするとブラジルのページに飛ぶような物を作りたくて、たぶんなにかしらのAPIを使うのだとは思って、調べましたがgoogle mapのような物しかでてこなくて困っています。何をどうすれば良いのか教えていただきたいです。
言語はPHPを使っています。

miyahan

2017/02/26 15:55

「なにかしらのAPIを使う」として「google mapのような物」では困る理由はあるのでしょうか？

kazoogon

2017/02/26 16:34

google mapのどこかの国をクリックして、その国々の自分の作ったページにとぶようにするにはどうすればよいのでしょうか？

行動規範の内容に同意します

回答5件

geochartの世界地図を使うのも手段としてはあると思います
https://developers.google.com/chart/interactive/docs/gallery/geochart

追記 2017/02/27 18:40
例えばこんな風になる
日本でgoogleブラジルでyahooに飛ぶように設定している

HTML
1<html>
2<head>
3<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
4<script type="text/javascript">
5      google.charts.load('current', {'packages':['geochart']});
6      google.charts.setOnLoadCallback(drawRegionsMap);
7
8      function drawRegionsMap() {
9
10        var data = google.visualization.arrayToDataTable([
11          ['国', 'Popularity'],
12          ['日本', '日本'],
13          ['ブラジル', 'ブラジル']
14        ]);
15        var options = {};
16        var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));
17        function selectHandler() {
18            var selectedItem = chart.getSelection()[0];
19            var row = selectedItem.row
20            if (selectedItem) {
21            	switch (row){
22	            	case 0:
23	                	url ="https://www.google.co.jp/";
24						break;
25	            	case 1:
26	            		url ="http://www.yahoo.co.jp/";
27	                	break;                
28            	}
29            	window.location.href = url;
30            }
31        }
32      google.visualization.events.addListener(chart, 'select', selectHandler);    
33      chart.draw(data, options);
34    	}
35    </script>
36</head>
37<body>
38	<div id="regions_div" style="width: 900px; height: 500px;"></div>
39</body>
40</html>
41

投稿2017/02/27 04:46

編集2017/02/27 09:39

date

総合スコア1820

kazoogon

2017/02/27 09:30

これってグラフ作成なので、国のとこクリックして違うページに飛ぶようにするのとかは無理ですかね？

date

2017/02/27 09:37

グラフ作成機能でも使い方次第で何とかなるかも例えばこんな感じで

行動規範の内容に同意します

SVGを使用する方法も手かと。ベクター画像なのでスケールに強いというところが利点かな。
サンプル

投稿2017/02/27 01:06

turbgraphics200

総合スコア4267

APIというか、「世界地図の画像データと、その画像の各点がどの国なのかの対応表」があれば、出来ます。

古典的にはmapタグを使ったクリッカブルマップという機能。
JavaScriptを使うなら、どの座標でクリックされたかというイベントを拾う。

まずは、四角いマス目の画像で、どのマス目がクリックされたか判別するものを作ってみて、感覚を掴んではどうでしょうか？

投稿2017/02/26 16:39

otn

総合スコア84538

アンカータグのshape属性とcoords属性を指定します。例えば、

HTML
1<area shape="poly" coords="50,100,200,100,200,150,300,150,300,200,50,200" href="リンク先" >
2  <img src="画像ファイル">
3</a>

のように任意の多角形で指定した領域にアクションを与えることができます。
shapeは、四角が"rect"、円が"circle"、多角形がpoly"です。
coordsは、x座標、y座標をつないでいきます。（円の場合は、x座標、y座標, 半径）

投稿2017/02/26 16:41

編集2017/02/26 16:44

seastar3

総合スコア2285

ベストアンサー

Google Map APIから、クリックした地点の緯度経度を取得。
Google Maps Geocoding APIを使用し逆ジオコーディングを実行。
国名(ISO 3166-1 準拠)が取得出来たら、その国のページに遷移。

投稿2017/02/27 09:40

abs123

総合スコア1280

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

世界地図を表示させ、ある国をクリックするとその国の写真のページにとぶような物を作りたいが。。。

関連した質問