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

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

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

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

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

Q&A

解決済

2回答

4027閲覧

google map apiのマッシュアップ

aba623ky

総合スコア63

PHP

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

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

0グッド

0クリップ

投稿2016/09/14 07:19

最近、googlemapapiを使い始め、応用としてgoogle map apiのマッシュアップを考えています。
※下記のhtmlは初歩的なものです。
例として、hotpepperapiとgooglemapapiのマッシュアップを考えています。その場合のhotpepperapiのlatとlngを使えば、マッシュアップができると思います。しかし、理屈ではわかりますがマッシュアップについて載ったサイトがないのでどうやったらマッシュアップができるか困っています。
わからない点
・phpファイルにjavascriptのコードを使うことは可能ですか?
・また、ホットペーパーapiにgoogle map apiを使用するには何をつけたせば表示されるようになるのですか?

php

1<?php 2$key='私のキー'; 3$count='10'; 4$large_area='〇〇'; 5$start ='1'; 6$lat='35.60472'; 7$lng='140.12333'; 8$format='xml'; 9$url='http://webservice.recruit.co.jp/hotpepper/gourmet/v1/?key='.$key.'&count='.$count.'&large_area='.$large_area.'&start='.$start.'&lat='.$lat.'&lng='.$lng.'&format='.$format; 10$xml=simplexml_load_file($url);

html

1<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2<html> 3<head> 4 <title>Google Maps V3</title> 5 <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 6 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 7 <script type="text/javascript"> 8 google.maps.event.addDomListener(window, 'load', function() 9 { 10 var lng =35.60472; 11 var lat =140.12333; 12 13 var latlng = new google.maps.LatLng(lat, lng); 14 var mapOptions = { 15 zoom: 12, 16 center: latlng, 17 mapTypeId: google.maps.MapTypeId.ROADMAP, 18 scaleControl: true 19 }; 20 var mapObj = new google.maps.Map(document.getElementById('gmap'), mapOptions); 21 22 var marker = new google.maps.Marker({ 23 position: latlng, 24 map: mapObj 25 }); 26 }); 27 </script> 28</head> 29<body> 30 <div id="gmap" style="width: 500px; height: 370px; border: 1px solid Gray;"> 31 </div> 32</body> 33</html>

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

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

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

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

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

kei344

2016/09/14 07:24

「マッシュアップについて載ったサイトがない」というのはどうやって探されたのでしょうか。また、PHPはどれくらい勉強されていますか?
aba623ky

2016/09/14 07:26

phpは二ヶ月勉強しました。 javascriptの方は全然です笑 サイトがないというのは、データが古いこと、googlemapapiの情報がサイトによって違うという意味です。
kei344

2016/09/14 08:08

Google Maps APIはJavaScriptの知識が無いとマッシュアップ以前の問題なので、まずは勉強されてから、わからない部分について質問されたほうが良いです。PHPでデータを必要な形に整形することと、そのデータを受け取る方法、さらにGoogle Maps APIで表示する方法のそれぞれがある程度の知識と勉強を必要とします。
guest

回答2

0

ベストアンサー

先月作ったサンプルがあるので、マップの表示部分を書き足してみました。

質問者が作りたいものなのかはっきりしませんが、複数のマーカーをひとつのマップに表示したいのかな?
一つのマーカーを一つのマップに表示するのはいくらでもサンプル見つかるはずなので…

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

イメージ説明

※コードはご自由に改変していただいて構いませんし、ご利用もご自由にどうぞ。

「情報の追加・修正の依頼をする」に

サイトがないというのは、データが古いこと、googlemapapiの情報がサイトによって違うという意味です。

との記述がありますが、本家のサイトにAPIのリファレンスやサンプルがありますので、ここを見るのが最も確実です。

ホットペッパーAPIが最近の流行りなんですかね…

投稿2016/09/14 20:26

編集2016/09/14 21:14
退会済みユーザー

退会済みユーザー

総合スコア0

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

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

aba623ky

2016/09/15 01:57

ホットペッパーAPIが最近の流行りなんですか笑 私はgooglemapapiに特にマッシュアップに興味があったので、質問したまでですが・・・ 私はどちらかというとgooglemapapiが好きです!
aba623ky

2016/09/15 02:10

どちらというと、一つのマーカーを一つのマップに表示する方法が知りたいです。
退会済みユーザー

退会済みユーザー

2016/09/15 02:11

それならあなた自身が提示したサンプルソースでできることではありませんか。
aba623ky

2016/09/15 02:22

ホットペーパーapiでlatなどを取得しなくても地図は表示できるのですか? kosuke_shibuyaさんのコードを見ると、googlemapapiで緯度 , 経度を取得していますが、ホットペーパーapiでは取得していないみたいで
退会済みユーザー

退会済みユーザー

2016/09/15 02:24

ホットペッパーAPIから緯度経度を取得し、tr タグ の属性にセットしています。
aba623ky

2016/09/15 02:29

ああ、ここの部分ですね笑 data-lat="<?= h($rest->lat); ?>" data-lng="<?= h($rest->lng); わかりました。
aba623ky

2016/09/15 03:16

echo '<tr data-lat="<?= h($rest->lat); ?>" data-lng="<?= h($rest->lng); ?>">'; にすることはわかりましたが、 lat: parseFloat(shops[i]のshops[i]はなんですか?
退会済みユーザー

退会済みユーザー

2016/09/15 03:24 編集

なんですかと言われても… shops は10件あるんがから、配列(正確には HTMLCollection)で、iはイテレータ。
aba623ky

2016/09/15 03:24

そういう意味ですね。
aba623ky

2016/09/15 03:30

一旦この質問は閉めさせていただきます。 いろいろ調べてからまた質問します。 本当にありがとうございます。
guest

0

マッシュアップは置いといて
google maps api v3 サンプル
などで検索するとgoogle map apiのサンプルが出てきます。まずはこれを利用してgooglemapを使えるようにしましょう。
まあjavascript初心者だったら
javascript 参考書
などでjavscriptの基礎から学ぶのが先ですが

最近google map api にkeyが必須になったようなので、(既存サイトには今は問題ない)取得しておく

投稿2016/09/15 00:55

date

総合スコア1820

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

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

aba623ky

2016/09/15 02:25

一つのマーカーを一つのマップに表示する方法が知りたいです。 あと、javascriptのコードをphpで実行する際に、 <?php echo <<<EOM <script type="text/javascript"> alert( "TEST" ) </script> EOM; ?> みたいに変換しなくてもいいのか? 疑問が多いです。 ※他の人のコードを見ると、変換していないのもあるので・・・
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問