2017-07-11 6 views
0

私はこのマーカーを作成しましたが、アドレスを使用して位置を入力しようとしています。このように:Googleマップでlat/lngの設定されていないマーカーを設定します

var myLatlng = "Castello d'Argile, VIA QUATTRO VIE 4"; 

var marker = new google.maps.Marker({ 
position: myLatlng, 
map: map, 
title: 'Example', 
icon: 'icon.png' 
}); 

アドレスだけでマーカーを追加することはできますか?

+0

いいえ、座標を取得するためにアドレスを使用することができます。使用するジオコーディング – scaisEdge

+1

[この単純なジオコーディングの例](https://developers.google.com/maps/documentation/javascript/examples/geocoding-simple)を確認してください。それはあなたが探しているものに似ているので助けになるでしょう – Uday

答えて

0

直接、

アドレスを緯度/経度に変換するには、Geocoding APIを使用し、それを使用してマーカーを設定する必要があります。

+1

これはコメントのようです...答えではありません。 – scaisEdge

+0

それは質問に答える。 Geocoding APIに問題がある場合は、試行してから別の質問をすることができます。 – samanime

+0

私はヒントです。これらのコメント/回答はコミュニティによって歓迎されないことが多いですが、好きなように行動することは自由です。 – scaisEdge

1

ジオコーディングサービスを使用することができます。 Google documentationに相談することができますが、コードは非常に簡単です。

まず、ジオコーディング:あなたは(あなたの変数myLatlngのような)パラメータのアドレスでそれを呼び出す必要があり、この機能を使用するためには

function geocodeAddress(the_address) { 
    var geocoder = new google.maps.Geocoder(); 
    geocoder.geocode({ 'address': the_address }, function (results, status) { 
     if (status === google.maps.GeocoderStatus.OK) { 
      map.setCenter(results[0].geometry.location); 
      return (results[0].geometry.location) 


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

行:results[0].geometry.locationは少し説明が複雑です。配列の結果は、JSONまたはXML形式にすることができます。正確さと住所の種類(位置、都市名など)のレベルはそれぞれ異なります。しかし、文書番号hereを今すぐ追加することができます。この段落に注意を払うことをお勧めします。

Google documentationに簡単な例があります。

これは私の完全なコードです:

<!DOCTYPE html> 
<html> 
<head> 
<title>Geocoding service</title> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
<meta charset="utf-8"> 
<style> 
    /* 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; 
    } 
    #floating-panel { 
    position: absolute; 
    top: 10px; 
    left: 25%; 
    z-index: 5; 
    background-color: #fff; 
    padding: 5px; 
    border: 1px solid #999; 
    text-align: center; 
    font-family: 'Roboto','sans-serif'; 
    line-height: 30px; 
    padding-left: 10px; 
    } 
</style> 
</head> 
<body> 
<div id="floating-panel"> 
    <input id="address" type="textbox" value="Sydney, NSW"> 
    <input id="submit" type="button" value="Geocode"> 
</div> 
<div id="map"></div> 
<script> 
    function initMap() { 
     var map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 8, 
     center: {lat: -34.397, lng: 150.644} 
    }); 
    var geocoder = new google.maps.Geocoder(); 

    document.getElementById('submit').addEventListener('click', function() { 
     geocodeAddress(geocoder, map); 
    }); 
    } 

    function geocodeAddress(geocoder, resultsMap) { 
    var address = document.getElementById('address').value; 
    geocoder.geocode({'address': address}, function(results, status) { 
     if (status === 'OK') { 
     resultsMap.setCenter(results[0].geometry.location); 
     var marker = new google.maps.Marker({ 
      map: resultsMap, 
      position: results[0].geometry.location 
     }); 
     } else { 
     alert('Geocode was not successful for the following reason: ' + status); 
     } 
    }); 
    } 
</script> 
<script async defer 
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"> 
</script> 

注意あなたは、APIキーGoogleがYOU_API_KEYを交換する必要があります。