google mapにclassを付ける方法

<!DOCTYPE html>

	```html
<html>
		<body>
				
		<table border="1">

<tr><td> <? h($rest->name) ?> </td></tr> <tr><td> <?= h($rest->genre->catch) ?> </td></tr> </table> </body>


※htmlを表示中！！
要素の詳細を表示でhtmlを出力しました。

<table border="1"><tr><td>くいものやチャカ津田沼店</td></tr><tr class="map"><td>140.022590803335.6900228211</td></tr><tr><td>千葉県習志野市津田沼１－３－１１昭和第３ビル２Ｆ</td></tr></table> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Google Maps V3</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="http://maps.google.com/maps/api/js?key=My Key&sensor=false"></script> <script type="text/javascript"> var gmap; google.maps.event.addDomListener(window, 'load', function() { var lat =35.60472; var lng =140.12333 ;

        var latlng = new google.maps.LatLng(lat, lng); 
        var mapOptions = { 
            zoom: 12, 
            center: latlng, 
            mapTypeId: google.maps.MapTypeId.ROADMAP, 
            scaleControl: true 
        }; 
        var mapObj = new google.maps.Map(document.getElementsByClassName('gmap'), mapOptions); 

        var marker = new google.maps.Marker({ 
            position: {lat:35.60472, lng: 140.12333},                
            map: mapObj 
        }); 
    }); 
</script>

</head> <body> <div id="gmap" style="width: 500px; height: 370px; border: 1px solid Gray;"> </div> </body> </html> ```

html
1var gmap;
2     google.maps.event.addDomListener(window, 'load', function() 
3     { 
4         var lat =35.60472;
5         var lng =140.12333 ; 
6
7
8         var latlng = new google.maps.LatLng(lat, lng); 
9         var mapOptions = { 
10             zoom: 12, 
11             center: latlng, 
12             mapTypeId: google.maps.MapTypeId.ROADMAP, 
13             scaleControl: true 
14         }; 
15         var mapObj = new google.maps.Map(document.getElementsByClassName('gmap'), mapOptions); 
16
17         var marker = new google.maps.Marker({ 
18             position: {lat:35.60472, lng: 140.12333},                
19             map: mapObj 
20         }); 
21     }); 
22 
23
24

ホットペーパーapiから千葉県にある10件の店舗を取得しました。その10件分の店舗にgoogle map apiの地図を表示するため(つまりマッシュアップです)、色々と調べました。
mapにclassを与え、getElementsByClassNameを使えば複数配置できることを知りました。
一応mapにクラスを与え(mapというクラスを使い複数配置するため)、getElementsByIdからgetElementsByClassName(getElementByIdだと地図が一つしか表示されないため)に変えました。
しかし、地図は表示されません。
ループを使わないと地図を複数表示できないという話を聞きましたが、ループを使わないと表示できないのですか？
一応ループを使いましたが、結果は同じく表示されません。

javascript
1var i = 0; 
2 i++
3///example

何を補足すれば地図が表示されますか？

<?php
$key='my key';
$count='10';
$large_area='Z014';
$start =1;
$format='xml';
$url='http://webservice.recruit.co.jp/hotpepper/gourmet/v1/?key='.$key.'&count='.$count.'&large_area='.$large_area.'&start='.$start.'&format='.$format;
$xml=simplexml_load_file($url);
$total_count=$xml->results_available;
if(!$xml->shop){
			echo 'We can not find!!';
		} else { 
			foreach($xml->shop as $r){	
echo '<table border="1">';
        echo '<tr>';
   echo '<td>';
   echo $r->name;
   echo '</td>';
      echo '</tr>';
       echo '<tr class="map">';   
     echo '<td>';
     echo $r->lng;
     echo $r->lat;
     echo '</td>';
     echo '</tr>';     
    echo '<tr>';
   echo '<td>';
   echo $r->address;
   echo '</td>';
   echo '</tr>'; 
     echo  '</table>';
     
     
       		?>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
    <title>Google Maps V3</title> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?key=mykey&sensor=false"></script> 
    <script type="text/javascript"> 
    var gmap;
        google.maps.event.addDomListener(window, 'load', function() 
        { 
            var lat =35.60472;
            var lng =140.12333 ; 


            var latlng = new google.maps.LatLng(lat, lng); 
            var mapOptions = { 
                zoom: 12, 
                center: latlng, 
                mapTypeId: google.maps.MapTypeId.ROADMAP, 
                scaleControl: true 
            }; 
            var mapObj = new google.maps.Map(document.getElementsByClassName('gmap'), mapOptions); 

            var marker = new google.maps.Marker({ 
                position: {lat : 35.60472, lng : 140.12333} ,                
                map: mapObj 
            }); 
        }); 
    </script> 
</head> 
<body> 
    <div id="gmap" style="width: 500px; height: 370px; border: 1px solid Gray;"> 
    </div> 
</body> 
</html>
<?php


   } }  ?>