コードポップアップ情報ウィンドウをマーカーのロット番号が含まれています

：

<?php 
/* 
Template Name: MAP4 
*/ 
get_header(); 
?> 

<!DOCTYPE html> 
<html> 
    <head> 
     <script src = "https://maps.googleapis.com/maps/api/js"></script> 
     <script> 
      function loadMap() { 
       var mapOptions = { 
        center:new google.maps.LatLng(33.888630, 35.495480), 
        zoom:12, 
        mapTypeId:google.maps.MapTypeId.ROADMAP 
       }; 

       var map = new google.maps.Map(document.getElementById("sample"),mapOptions); 
      } 

      google.maps.event.addDomListener(window, 'load', loadMap); 
     </script> 
    </head> 

    <body> 
     <div id = "sample" style = "width:580px; height:400px;"></div> 
    </body> 
</html> 


<?php 
get_footer(); 
?>

出典

2017-03-02 Nabil Jaroush

を特長配列を交換してください私たちはあなたのデータがどのように構造化されているかわからない、我々は接続情報を知らない。これは「私のためにやってください」という質問のようです。あまりにも広範囲にわたって、私は閉じようとしている。私はあなた自身でそれを試してみることをお勧めします。実際の質問があるときに戻ってください。私たちはさらにあなたを助けようと試みることができます。 – FrankerZ

データベースからphpに、そしてPHPからjavascriptにJSONオブジェクトを通してデータを渡す必要があります。次に、JSONオブジェクトの配列をループし、ループ内にマーカーを追加してイベントハンドラを設定する必要があります。イベントハンドラのコールバックでは、infoWindowを作成して内容を入力します。 –

することができますこれを試してください： - javascriptのようにPHPからマーカーを生成することができます。は、以下の例は、Google Map API

var map; 
 
     function initMap() { 
 
     map = new google.maps.Map(document.getElementById('map'), { 
 
      zoom: 16, 
 
      center: new google.maps.LatLng(-33.91722, 151.23064), 
 
      mapTypeId: 'roadmap' 
 
     }); 
 

 
     var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/'; 
 
     var icons = { 
 
      parking: { 
 
      icon: iconBase + 'parking_lot_maps.png' 
 
      }, 
 
      library: { 
 
      icon: iconBase + 'library_maps.png' 
 
      }, 
 
      info: { 
 
      icon: iconBase + 'info-i_maps.png' 
 
      } 
 
     }; 
 

 
     function addMarker(feature) { 
 
      var marker = new google.maps.Marker({ 
 
      position: feature.position, 
 
      icon: icons[feature.type].icon, 
 
      map: map 
 
      }); 
 
     } 
 

 
     var features = [ 
 
      { 
 
      position: new google.maps.LatLng(-33.91721, 151.22630), 
 
      type: 'info' 
 
      }, { 
 
      position: new google.maps.LatLng(-33.91539, 151.22820), 
 
      type: 'info' 
 
      }, { 
 
      position: new google.maps.LatLng(-33.91747, 151.22912), 
 
      type: 'info' 
 
      }, { 
 
      position: new google.maps.LatLng(-33.91910, 151.22907), 
 
      type: 'info' 
 
      }, { 
 
      position: new google.maps.LatLng(-33.91725, 151.23011), 
 
      type: 'info' 
 
      }, { 
 
      position: new google.maps.LatLng(-33.91872, 151.23089), 
 
      type: 'info' 
 
      }, { 
 
      position: new google.maps.LatLng(-33.91784, 151.23094), 
 
      type: 'info' 
 
      }, { 
 
      position: new google.maps.LatLng(-33.91682, 151.23149), 
 
      type: 'info' 
 
      }, { 
 
      position: new google.maps.LatLng(-33.91790, 151.23463), 
 
      type: 'info' 
 
      }, { 
 
      position: new google.maps.LatLng(-33.91666, 151.23468), 
 
      type: 'info' 
 
      }, { 
 
      position: new google.maps.LatLng(-33.916988, 151.233640), 
 
      type: 'info' 
 
      }, { 
 
      position: new google.maps.LatLng(-33.91662347903106, 151.22879464019775), 
 
      type: 'parking' 
 
      }, { 
 
      position: new google.maps.LatLng(-33.916365282092855, 151.22937399734496), 
 
      type: 'parking' 
 
      }, { 
 
      position: new google.maps.LatLng(-33.91665018901448, 151.2282474695587), 
 
      type: 'parking' 
 
      }, { 
 
      position: new google.maps.LatLng(-33.919543720969806, 151.23112279762267), 
 
      type: 'parking' 
 
      }, { 
 
      position: new google.maps.LatLng(-33.91608037421864, 151.23288232673644), 
 
      type: 'parking' 
 
      }, { 
 
      position: new google.maps.LatLng(-33.91851096391805, 151.2344058214569), 
 
      type: 'parking' 
 
      }, { 
 
      position: new google.maps.LatLng(-33.91818154739766, 151.2346203981781), 
 
      type: 'parking' 
 
      }, { 
 
      position: new google.maps.LatLng(-33.91727341958453, 151.23348314155578), 
 
      type: 'library' 
 
      } 
 
     ]; 
 

 
     for (var i = 0, feature; feature = features[i]; i++) { 
 
      addMarker(feature); 
 
     } 
 
     }

/* Always set the map height explicitly to define the size of the div 
 
     * element that contains the map. */ 
 
     #map { 
 
     height: 100%; 
 
     } 
 
     /* Optional: Makes the sample page fill the window. */ 
 
     html, body { 
 
     height: 100%; 
 
     margin: 0; 
 
     padding: 0; 
 
     }

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <title>Custom Markers</title> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> 
 
    <meta charset="utf-8"> 
 
    
 
    </head> 
 
    <body> 
 
    <div id="map"></div> 
 
    
 
    <script async defer 
 
    src="https://maps.googleapis.com/maps/api/js?callback=initMap"> 
 
    </script> 
 
    </body> 
 
</html>

から取得されますが、私は*これらのマーカーを得るのを助ける*何を意味するのですか？次のPHPで

<?php 
$prependStr ="" 
foreach($wpdb->get_results("SELECT * FROM your_map_table_name ") as $key => $row) { 
$latitude = $row->latitude; 
$longitude = $row->longitude; 
$info = $row->info; 
echo $prependStr; 
?> 
{ 
    position: new google.maps.LatLng(<?php echo $latitude; ?>, <?php echo $latitude; ?>), 
    type: '<?php echo $info; ?>' 
} 
<?php 
$prependStr =","; 
} 
?>

出典

2017-03-02 06:52:49

回答ありがとうございますが、** var features = [] ** arrayこの配列をMYSQLデータベースから取得したデータで置き換えるにはどうすればよいですか？ –

@NabilJaroushが答えを更新しました –

Wordpress：Googleマップにマーカを追加して、そのデータをMYSQLから取得する方法

コードポップアップ情報ウィンドウをマーカーのロット番号が含まれています ：

答えて

関連する問題

コードポップアップ情報ウィンドウをマーカーのロット番号が含まれています

：