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

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

新規登録して質問してみよう
ただいま回答率
85.50%
PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

Q&A

解決済

1回答

2411閲覧

googlemapの地図を複数配置したい

aba623ky

総合スコア63

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

1グッド

0クリップ

投稿2016/10/13 10:08

ホットペーパーapiとgoogle mapapiを連携したコードを作成中です。
一つ疑問に思ったのですが、下記のコードだと最初の一件の店舗の地図にしか表示されません。
それぞれjavascriptとphpで処理しているため、表示されないのかな?と思い、
table(phpで処理されている)の中にEOMをつかってgoogle map apiのコードを挿入したのですが、当然ながら表示されず、エラーが出ました。
ホットペーパーapiから10件の店舗を取得しましたが10件分の地図を表示するには何を補足すれば表示できますか?

php

1<td> 2echo <<<EOM<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=AIzaSyCrj6PkyYBkxnPmNpIm5lpYNPOdDwS76sc&sensor=false"></script> 3 <script type="text/javascript"> 4 google.maps.event.addDomListener(window, 'load', function() 5 { 6 var lat =35.60472; 7 var lng =140.12333 ; 8 9 10 var latlng = new google.maps.LatLng(lat, lng); 11 var mapOptions = { 12 zoom: 12, 13 center: latlng, 14 mapTypeId: google.maps.MapTypeId.ROADMAP, 15 scaleControl: true 16 }; 17 var mapObj = new google.maps.Map(document.getElementById('gmap'), mapOptions); 18 19 var marker = new google.maps.Marker({ 20 position: {lat:35.60472, lng: 140.12333 }, 21 map: mapObj 22 }); 23 }); 24 </script> 25 EOM; 26</td>

元のコード

php

1<?php 2$key='my key'; 3$count='10'; 4$large_area='Z014'; 5$start =1; 6$format='xml'; 7$url='http://webservice.recruit.co.jp/hotpepper/gourmet/v1/?key='.$key.'&count='.$count.'&large_area='.$large_area.'&start='.$start.'&format='.$format; 8$xml=simplexml_load_file($url); 9$total_count=$xml->results_available; 10if(!$xml->shop){ 11 echo 'We can not find!!'; 12 } else { 13 foreach($xml->shop as $rest){ 14echo '<table border="1">'; 15 echo '<tr>'; 16 echo '<td>'; 17 echo $rest->name; 18 echo '</td>'; 19 echo '</tr>'; 20 echo '<tr>'; 21 echo '<td>'; 22 echo $rest->lng; 23 echo $rest->lat; 24 echo '</td>'; 25 echo '</tr>'; 26 echo '<tr>'; 27 echo '<td>'; 28 echo $rest->address; 29 echo '</td>'; 30 echo '</tr>'; 31 echo '</table>'; 32 33 34 ?> 35 36<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 37<html> 38<head> 39 <title>Google Maps V3</title> 40 <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 41 <script type="text/javascript" src="http://maps.google.com/maps/api/js?key=AIzaSyCrj6PkyYBkxnPmNpIm5lpYNPOdDwS76sc&sensor=false"></script> 42 <script type="text/javascript"> 43 google.maps.event.addDomListener(window, 'load', function() 44 { 45 var lat =35.60472; 46 var lng =140.12333 ; 47 48 49 var latlng = new google.maps.LatLng(lat, lng); 50 var mapOptions = { 51 zoom: 12, 52 center: latlng, 53 mapTypeId: google.maps.MapTypeId.ROADMAP, 54 scaleControl: true 55 }; 56 var mapObj = new google.maps.Map(document.getElementById('gmap'), mapOptions); 57 58 var marker = new google.maps.Marker({ 59 position: {lat:35.60472, lng:140.12333?>}, 60 map: mapObj 61 }); 62 }); 63 </script> 64</head> 65<body> 66 <div id="gmap" style="width: 500px; height: 370px; border: 1px solid Gray;"> 67 </div> 68</body> 69</html> 70<?php 71 72 73 } } ?>
garasya👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Lhankor_Mhy

2016/10/13 10:24

実際にエラーが出たコードをご提示ください。また、併せてエラーメッセージも書いてください。
aba623ky

2016/10/13 10:41

エラーとは、画面が白紙になったということです。
Lhankor_Mhy

2016/10/13 10:44

display_errorsを設定してください……
aba623ky

2016/10/13 11:24

あと、一つ疑問ですが、classを利用するんですよね?
Lhankor_Mhy

2016/10/13 11:29

実装の仕方によるとしか言えませんが、私もそうします。Kosuke_Shibuyaさんのやり方はスマートだと思いますが、質問者さんには難しいかもしれません。
Lhankor_Mhy

2016/10/13 12:15

そうですね、DOM操作をしなければならないのでjavascriptの知識が必要になりますね。PHPの中でループをかけて同じコードを生成した方が、かっこは悪いですが質問者さんには分かりやすいと思うのですが…… がんばってください。
aba623ky

2016/10/13 13:14

>PHPの中でループをかけて同じコードを生成した方が これはどうやってやるのですか?
aba623ky

2016/10/13 13:19

document.getElementByIdってdomなんですよね。
Lhankor_Mhy

2016/10/14 00:23

うーん、まあ、大雑把にはそんな感じです。
guest

回答1

0

ベストアンサー

(XML版)ホットペッパーAPIからレストラン検索するサンプル その2

ここに記載されているコードの中のコメントを読んでいれば、分かるはず。

投稿2016/10/13 10:33

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

aba623ky

2016/10/13 10:36

クラスを使うってことですか?
退会済みユーザー

退会済みユーザー

2016/10/13 10:37

珍しく正解!
aba623ky

2016/10/13 10:40

分かりました。ありがとうございます。一度tryしてみます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問