データベースクエリからGoogleマップマーカーを作成する

Question

私は約4000のアドレスのデータベースを持っていますが、私はGoogleマップ上にマーカーとしてリストしたいと思います...私の最終目標は、2種類のマーカー今のところ私はマップのjavascriptの場所の変数に私のPHPからの結果を結合する方法を知っていると思います。ここで成功した緯度とlogitudeをエコー表示PHP ...ここ

$address = pg_query($conn, " 
SELECT 
    incident.address, 
    incident.city, 
    incident.state_1 
FROM 
    fpscdb001_ws_001.incident 
WHERE 
    incident.initial_symptom = 'Chrome Upgrade' AND 
    incident.is_installed != 'true';"); 

    if (!$address) { 
      echo "Query failed\n"; 
      exit; 
     } 
while ($markers = pg_fetch_row($address)){ 
    $request_url = "http://maps.googleapis.com/maps/api/geocode/xml?address=".$markers[0]."&sensor=true"; 
    $xml = simplexml_load_file($request_url) or die("url not loading"); 
    $status = $xml->status; 
    if ($status=="OK") { 
    $Lat = $xml->result->geometry->location->lat; 
    $Lon = $xml->result->geometry->location->lng; 
    $LatLng = "$Lat,$Lon"; 
    } 
echo "<td>$LatLng</td>"; 

    } 

ではJavaScriptされている...サンプルコードでは、緯度とLNG列挙されている、私はPHPを実行する必要があるところ、これがあると仮定します。

function initMap() { 

    var map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 5, 
     center: {lat: 39.350033, lng: -94.6500523} 
    }); 

    // Do not actually need labels for our purposes, but the site_id is best if they are required. 
    var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'; 



    // Add some markers to the map. 
    // Note: The code uses the JavaScript Array.prototype.map() method to 
    // create an array of markers based on a given "locations" array. 
    // The map() method here has nothing to do with the Google Maps API. 
    var markers = locations.map(function(location, i) { 
     return new google.maps.Marker({ 
     position: location, 
     label: labels[i % labels.length] 
     }); 
    }); 

    // Find a way to set lat and lng locations from database. 
    var markerCluster = new MarkerClusterer(map, markers, 
     {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'}); 
    } 


    var locations = //some code to populate from database 

私はAPIキーを持っており、クラスタリングのJavaScriptを含んでいます。

Answer 1

これはそれを行う必要があります。

PHP：あなたが見ることができるように、私は配列を作成し、JSON形式の文字列に変換でい

$arr = array(); 
while ($markers = pg_fetch_row($address)){ 
    .... 
    $Lat = $xml->result->geometry->location->lat; 
    $Lon = $xml->result->geometry->location->lng; 
    $arr[] = array("lat" => $Lat, "lng" => $Lng); 
} 
echo json_encode($arr); 

。 JSONの形式は[{lat:Number, lng:Number},....] JavaScript locationsの配列の形式とまったく同じです。

はJavaScript：

var xhr = new XMLHttpRequest(); 
xhr.onreadystatechange = function() { 
    if (xhr.readyState == 4) { 
     var arr = JSON.parse(xhr.responseText); 
     if(Array.isArray(arr)){ 
      showMarkers(arr); 
     } 
    } 
} 
xhr.open('GET', 'link/to/php/script', true); 
xhr.send(); 

function showMarkers(locations){ 
    var markers = locations.map(function(location, i) { 
     return new google.maps.Marker({ 
     position: location, 
     label: labels[i % labels.length] 
     }); 
    }); 

    var markerCluster = new MarkerClusterer(map, markers, {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'}); 
} 

あなたがjQueryを使用している場合は、AJAX呼び出しを簡素化することができます。

initMap関数としてonreadystatechangeが非同期に実行されるため、AJAX呼び出しを行う前にマップが準備完了であることを確認する必要があります。