1

データベースから住所を取得してすべての場所を表示するページを作成していますが、コードはデータベースの最初の住所フィールドのみを表示しています。私はグーグルと関連するすべての質問を検索しましたが、何も機能していないようです。

出力として、住所フィールドの最初の場所を取得しており、その場所が Google マップに表示されています。私がする必要があるのは、データベースの住所フィールドから住所のすべての行を取得し、Google マップ (複数のマーカー) に表示することです。

すべての住所を取得してデータベースの配列に保存し、Google マップの「 var address 」からそれらの住所を表示する方法はありますか。

この概念に慣れていない私を助けてください。

      <!DOCTYPE html>
      <html>
      <head>
      <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
      <title>Google Maps Multiple Markers</title>
      <? 
      error_reporting(0);
     include('dbcon.php');
     $result = mysql_query("SELECT address FROM markers");
     $new_array = array();
     while ($row = mysql_fetch_assoc($result)) {
     $new_array[] = $row['address'];  
     }

    $add_js = json_encode( $new_array );
     ?>
    <script
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
    <script src="http://maps.google.com/maps/api/js?sensor=false"
    type="text/javascript"></script>
    </head>
    <body>
    <div id="map" style="width: 500px; height: 400px;"></div>
    <script type="text/javascript">
    var side_bar_html = "";
    var icon1 = "prop.png";
        var icon2 = "build.png";
        var locations = <?php echo $add_js ?>;
    //alert(locations);        
    function geocodeAddress(i) {
            geocoder.geocode(
                        {
                            'address' : locations[i]
                        },
                        function(results, status) {
                            if (status == google.maps.GeocoderStatus.OK) {
                                map.setCenter(results[0].geometry.location);
                                createMarker(results[0].geometry.location, i);
                            } else {
                                alert('Geocode was not successful for the 
                              following   reason: '
                                        + status);
                            }
                        });
                      }   

       function createMarker(latlng,i) {
       var marker = new google.maps.Marker({
                                    map : map,
                    icon : icon1,
                                    position : latlng
                                });

                 //add info window

              google.maps.event.addListener(marker, 'mouseover', function() {
               marker.setIcon(icon2);
           infowindow.setContent(locations[i]);
           infowindow.open(map, marker);
           title: 'Property!'
                });

       google.maps.event.addListener(marker, 'mouseout', function() {
              marker.setIcon(icon1);
              infowindow.setContent(locations[i]); 
              infowindow.close(map, marker);
              title: 'Property!' 
         });

             //end of adding info window

             return marker;
              }


              var map = new google.maps.Map(document.getElementById('map'), {
              zoom : 10,
              center : new google.maps.LatLng(28.6139, 77.2089),
              mapTypeId : google.maps.MapTypeId.ROADMAP
              });

             var infowindow = new google.maps.InfoWindow({
                     size: new google.maps.Size(150,50)});

             var geocoder = new google.maps.Geocoder();

             for (var i = 0; i < locations.length; i++) {
              geocodeAddress(i);

             }//end of for loop
            </script>

            </body>
           </html>
4

1 に答える 1