2016-08-17 141 views
2

當人們在我的網站上註冊時,他們輸入他們的街道名稱。我想插入一個可以生成其位置的地圖。我已經獲得了PHP變量,但是如何將它們插入Google Javascript代碼中,可以在地圖上生成特定位置。我曾嘗試閱讀一些Google地圖開發人員,並製作了自己的API密鑰,但我不知道如何從這一點前進。從地址變量到谷歌地圖

$sql = "SELECT * FROM submitted WHERE id ='$id'"; 
$sql_run = $db->query($sql); 
$row = mysqli_fetch_assoc($sql_run); 

$city= $row["city"]; 
$street= $row["streetname"]; 
+0

首先閱讀[Google Maps API](https://developers.google.com/maps/)上的文檔 –

+0

您正在尋找生成地圖還是僅查看緯度經度? –

+0

我讀過的東西需要將城市和街道名稱轉換爲緯度經度,然後從該點生成地圖。我需要整個過程的一些幫助。 – Hazelcraft

回答

1

要繪製在地圖上的地址,請按照下列步驟操作:

第1步:包括谷歌地圖API的腳本文件

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY"></script> 

第2步:創建一個地圖元素

<div id="map" style="height: 550px; width: 100%;"></div> 

步驟3:聲明地圖元素並將地址進行地理編碼以繪製標記的代碼

<script type="text/javascript"> 
// ====== Create map objects ====== 
var latlng = new google.maps.LatLng(-34.397, 150.644); 
var mapOptions = { 
     zoom: 10, 
     center: latlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
var geo = new google.maps.Geocoder(); 
var map = new google.maps.Map(document.getElementById("map"), mapOptions); 
var bounds = new google.maps.LatLngBounds(); 

// ====== Geocoding ====== 
function getAddress(search) { 
    geo.geocode({address:search}, function (results,status) 
     { 
     // If that was successful 
     if (status == google.maps.GeocoderStatus.OK) { 
      // Lets assume that the first marker is the one we want 
      var p = results[0].geometry.location; 
      var lat=p.lat(); 
      var lng=p.lng(); 
      // Output the data 
      createMarker(search,lat,lng); 
     } 
     // ====== Decode the error status ====== 
     else { 
      alert('Something went wrong. Please Try again.'); 
     } 
     } 
    ); 
} 


// ======= Function to create a marker 
function createMarker(location,lat,lng) { 
    var marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(lat,lng), 
     map: map 
    }); 

    google.maps.event.addListener(marker, 'click', function() { 
     alert("Your Location : "+location); 
    }); 

    bounds.extend(marker.position); 
} 
</script> 

第4步:從數據庫中獲取地址,並在具有給定地址變量的腳本中調用地理編碼函數getAddress('address from db')

<?php 
$city = $row["city"]; 
$street = $row["streetname"]; 
?> 
<script> 
getAddress('<?php echo $street.','.$city; ?>'); 
</script> 

我希望你能很容易理解這段代碼。如果有關於此代碼的問題,請告訴我。