ホットペーパーで取得したデータにgoogle map apiの地図を入れたい

http://qiita.com/ShibuyaKosuke/items/452928e235d4b1d10475
このサイトを参考にし題名に書いてあることを実行したいのですが、わからないところがあります。
このサイトを見る限りlat lngをつかってマッシュアップを行うみたいですが、
どうやったら、この二つのapiのlat lngを結びつけることができるのですか？
二つのapiのlat lng を書けば表示されるという指摘を受けましたが、二つのapiのコードを貼って、なおかつ二つのapiのlat lng を書いてもホットペーパーで取得する店舗とリンクせず、google map apiの地図は白紙のままです。
ホットペーパーapiとgoogle map apiのコードのlat lngを結びつけさせるにはどうすればいいですか？
僕が作りたいのは、ホットペーパーapiで店舗情報を取得し、その店舗情報にgoogle map apiから取得した地図を貼りたいのです。

ここの箇所が今回の質問のヒントになると思いますが、すみません、もしよかったらご教授お願いします。
宜しくお願い致します！！！

javascript
1<div id="map" data-lat="<?= h($restaurants->shop->lat); ?>" data-lng="<?= h($restaurants->shop->lng); ?>">
2
3                    </div>

※ここでは例として東京のlat lngを使います。

php
1<?php
2$key='MY KEY';
3$count='10';
4$large_area='Z011';
5$start =1;
6$lng =35.68944;
7$lat =139.69167 ;
8$format='xml';
9$url='http://webservice.recruit.co.jp/hotpepper/gourmet/v1/?key='.$key.'&count='.$count.'&start='.$start.'&lat='.$lat.'&lng='.$lng.'&format='.$format;
10$xml=simplexml_load_file($url);
11if(!$xml->shop){
12			echo 'FAIL';
13		} else { 
14			foreach($xml->shop as $r){
15       echo '<tr>';
16      echo '<td>';  
17      echo $r->name;
18        echo '</td>';
19   echo '</tr>';
20 echo '<tr>';
21   echo '<td>';       
22    echo $r->genre->catch;
23   echo '</td>';
24   echo '</tr>';  
25}
26?>
27///この下にgoogle map を挿入したいです。
28
29<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
30<html> 
31<head> 
32    <title>Google Maps V3</title> 
33    <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
34    <script type="text/javascript" src="http://maps.google.com/maps/api/js?&sensor=false"></script> 
35    <script type="text/javascript"> 
36        google.maps.event.addDomListener(window, 'load', function() 
37        { 
38            var lng =35.68944;
39            var lat =139.69167 ; 
40
41            var latlng = new google.maps.LatLng(lat, lng); 
42            var mapOptions = { 
43                zoom: 12, 
44                center: latlng, 
45                mapTypeId: google.maps.MapTypeId.ROADMAP, 
46                scaleControl: true 
47            }; 
48            var mapObj = new google.maps.Map(document.getElementById('gmap'), mapOptions); 
49
50            var marker = new google.maps.Marker({ 
51                position: {lat:
52                lng: }, 
53                map: mapObj 
54            }); 
55        }); 
56    </script> 
57</head> 
58<body> 
59    <div id="gmap" style="width: 500px; height: 370px; border: 1px solid Gray;"> 
60    </div> 
61</body> 
62</html>

Lhankor_Mhy

2016/10/08 09:21

ifやforeachが閉じられてませんけど、また閉じられたなら閉じられたでgoogleマップAPIを何度も読みそうなんですが、実際のコードではきちんと書かれてますか？

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

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

関連した質問