phpでmysqlのデータを使ってgoogleマップにマーカーを表示

ここに例を載せました。 phpでmysqlのデータを使ってgoogleマップにマーカーを表示

現在、私は

のJavaスクリプトのページにマップをロードする、などの静的コードとHTMLページにマップ上の場所を示しています

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=true"> </script> 

<script type="text/javascript"> 
    var map; 
    var centerPos = new google.maps.LatLng(37.0902,95.7129); 
    var zoomLevel = 4; 
    function initialize() 
    { 
     var mapOptions = 
     { 
     center: centerPos, 
     zoom: zoomLevel 
     }; 
     map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); 
    } 
    google.maps.event.addDomListener(window, 'load', initialize); 
    </script>

グーグルマップ本部：

<div id="Community-Google-Map-Div"> 
      <div class="wrap"> 
      <div id="map-canvas"> 
      </div> 
      </div> 
    </div>

読み込むJavaスクリプト異なる場所：

<script type="text/javascript"> 

    function LocateSales() 
    { 
     var map; 
     var centerPos = new google.maps.LatLng(22.4700,77.5667); 
     var zoomLevel = 4; 

     var mapOptions = 
     { 
     center: centerPos, 
     zoom: zoomLevel 
     }; 
     map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); 

     var locations = [ ['USA', 50.0000, 79.7800], 
         ['Second', 82.9667, 77.5667], 
         ['Third', 78.4700, 77.0300] 
         ]; 

      for (i = 0; i < locations.length; i++) { 
      marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
     title: locations[i][0],map: map }); 
     } 
    } 
    google.maps.event.addDomListener(window, 'load', initialize); 
    </script>

だから、これを解決する方法を教えてください！

のjQuery：あなたはこのようなPHPファイルでAJAXを使用することができます

出典

2016-07-02 Vir

どうか間違いを教えてください。 –

コードに誤りがありますか？ – Dave

私が取り出す内容は配列 "var locations ="からです。新しい場所を追加したい場合は修正し、毎回javascriptコードを編集します。データベースから取得したいと思います。しかし、PHPとMySQLでこれを行う方法を知らないのですか？ – Vir

みんなありがとう（http://php.net/manual/fr/book.pdo.php）あなたがあなたのDBに接続するためにPDO助言が、私は答えを得ました。私はここに投稿します

<?php 
error_reporting(E_ALL^E_DEPRECATED); 

$conn = mysql_connect("localhost", "root", "") or die(mysql_error()); 
mysql_select_db("slcommunitydb") or die(mysql_error()); 
?> 

<html> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=utf-8"/> 
    <title>Google Maps</title> 

<!-------- Customizable Css for Map -----------------------------> 
    <style type="text/css"> 
     body { font: normal 10pt Helvetica, Arial; } 
     #map { width: 500px; height: 300px; border: 0px; padding: 0px; } 
    </style> 

    <!---------------- Java Scripts for Map -----------------> 
    <script src="http://maps.google.com/maps/api/js?key=xxxxxxxxxxxxxxxx&sensor=false" 
    type="text/javascript"></script> 

    <!------------- Java Scripts for Map -------------------> 
    <script type="text/javascript"> 

    //--------------------- Sample code written by vIr ------------ 
    var icon = new google.maps.MarkerImage("http://maps.google.com/mapfiles/ms/micons/blue.png", 
       new google.maps.Size(32, 32), new google.maps.Point(0, 0), 
       new google.maps.Point(16, 32)); 
        var center = null; 
        var map = null; 
        var currentPopup; 
        var bounds = new google.maps.LatLngBounds(); 
        function addMarker(lat, lng, info) { 
         var pt = new google.maps.LatLng(lat, lng); 
         bounds.extend(pt); 
         var marker = new google.maps.Marker({ 
          position: pt, 
          icon: icon, 
          map: map 
         }); 
         var popup = new google.maps.InfoWindow({ 
          content: info, 
          maxWidth: 300 
         }); 
         google.maps.event.addListener(marker, "click", function() { 
          if (currentPopup != null) { 
           currentPopup.close(); 
           currentPopup = null; 
          } 
          popup.open(map, marker); 
          currentPopup = popup; 
         }); 
         google.maps.event.addListener(popup, "closeclick", function() { 
          map.panTo(center); 
          currentPopup = null; 
         }); 
        }   
        function initMap() { 
         map = new google.maps.Map(document.getElementById("map"), { 

          center: new google.maps.LatLng(0, 0), 
          zoom: 14, 
          mapTypeId: google.maps.MapTypeId.ROADMAP, 
          mapTypeControl: true, 
          mapTypeControlOptions: { 
           style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR 
          }, 
          navigationControl: true, 
          navigationControlOptions: { 
           style: google.maps.NavigationControlStyle.ZOOM_PAN 
          } 
         }); 
    <?php 

    $query = mysql_query("SELECT * FROM salesmapmarkers")or die(mysql_error()); 
    while($row = mysql_fetch_array($query)) 
    { 
     $name = $row['name']; 
     $lat = $row['lat']; 
     $lon = $row['lon']; 
     $desc = $row['desc']; 

    echo("addMarker($lat, $lon, '<b>$name</b><br />$desc');\n"); 
    } 
    ?> 
    center = bounds.getCenter(); 
    map.fitBounds(bounds); 

    } 
    </script> 

    </head> 
    <body onLoad="initMap()" style="margin:0px; border:0px; padding:0px;"> 
     <div id="map"></div> 
    </body> 
</html>

出典

2016-07-04 11:03:43 Vir

あなたのPHPファイルで

function getLocations() 
{ 
    $.ajax({ 

     type: "POST", 
     dataType: "json", 
     url: "yourPhpFile.php", 
     success: function(locations) 
     { 
      //place markers 
     }, 
     error: function() 
     { 
      alert("error"); 
     } 
    }); 


}

、あなたのDBに接続する必要があります - >あなたのテーブルにクエリを実行する（名前、長いです、lat）。最後にecho json_encode($yourarray);

"$ yourarray"はajax（JSONオブジェクト）の "location"になります。

注：私はあなたの応答のための

出典

2016-07-04 09:31:21 Yvan

お返事ありがとうございます。私は自分の "mysql_connect"をPDOに更新します......！ – Vir

phpでmysqlのデータを使ってgoogleマップにマーカーを表示

答えて

関連する問題