Googleマップを使用してデータベースに格納されている場所を表示する

-1

私のデータベースには、経度と緯度を使っていくつかの場所が保存されています。Googleマップを使用してデータベースに格納されている場所を表示する

私の質問はどのように私はこれらの場所を表示するにはGoogleマップを使用できますか？

これは私のテーブル構造である：

名：GPSの

属性：（ID、経度、緯度）

これは私のコードである：

<html>  
    <!-- Inclusion de l'API Google Maps --> 
<script src="http://maps.google.com/maps/api/js?sensor=true"></script> 
<script> 

    // On vérifie si le navigateur supporte la géolocalisation 
    if(navigator.geolocation) { 

function hasPosition(position) { 
// Instanciation 


var point = new google.maps.LatLng(10.18153, 36.80649), 

// Ajustage des paramètres 
myOptions = { 
    zoom: 15, 
    center: point, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}, 

// Envoi de la carte dans la div 
mapDiv = document.getElementById("mapDiv"), 
map = new google.maps.Map(mapDiv, myOptions), 

marker = new google.maps.Marker({ 
    position: point, 
    map: map, 
    // Texte du point 
    title: "Vous êtes ici" 
    }); 
} 
navigator.geolocation.getCurrentPosition(hasPosition); 
} 
</script> 
    <style> 
    #mapDiv { 
    /* Modifier la taille de la carte avec width et height */ 
width:600px; 
height:450px; 
border:1px solid #efefef; 
margin:auto; 
-moz-box-shadow:5px 5px 10px #000; 
-webkit-box-shadow:5px 5px 10px #000; 
} 
    </style> 
    <!-- La carte sera chargée ici --> 
    <div id="mapDiv"></div> 
    </div> 
    </html>

任意のアイデア？

出典

2017-06-24 Raddadi Mohamed

このソリューションがお役に立てれば幸いです。

CSS

<style> 
    #map { 
     height: 400px; 
    } 
</style>

HTML

<div id="map"></div>

SCRIPT

NOTE: a = latitude , b = longitude 

function initialize(a, b) { 
     geocoder = new google.maps.Geocoder(); 
     var latlng = new google.maps.LatLng(a, b); 
     var myOptions = { 
      zoom: 13, 
      center: latlng, 
      mapTypeId: google.maps.MapTypeId.ROADMAP, 
     }; 
     var map = new google.maps.Map(document.getElementById("map"), myOptions); 
     var marker = new google.maps.Marker({ 
      map: map, 
      position: latlng 
     }); 
    }

latとlongがない場合、次のコードを使用してlatとlongを見つけることができます。

function getLatLong(address) { 

     var geo = new google.maps.Geocoder; 
     geo.geocode({'address': address}, function(results, status) { 

      if (status == google.maps.GeocoderStatus.OK) { 

       var add = results[0].geometry.location; 


       initialize(add.lat(), add.lng()); 

      } else { 
       alert("Geocode was not successful for the following reason: " + status); 
      } 

     }); 
    }

出典

2017-06-24 09:08:17

ありがとうございます！私の問題は、Googleマップのスクリプトで、私のデータベースに保存されている経度と緯度を使用する方法です！別の方法では、すべてのIDが私のIDを選択し、 "Trace"ボタンをクリックすると、スクリプトがこのIDの正しい座標を取得し、マップに表示するように私のWebアプリケーションでそのような場所を持っています！あなたは私の問題を願っていますか？ –

をクリックして 'Trace'を呼び出し、この' initialize'関数を呼び出して、表示したいこの関数の 'latとlong'を渡します。あなたは 'ajax呼び出し'と '成功'呼び出し '初期化'関数でidを使って 'lat long'データをデータベースから取り出すことができます。 –

Googleマップを使用してデータベースに格納されている場所を表示する

答えて

関連する問題