アドレスの配列からの複数のマーカーGoogle Map API v3およびpageLoadでのジオコーディング中のOVER_QUERY_LIMITの回避
アドレスの配列から複数のマーカー機能を実装する必要があります。アドレスの文字列がデータベースから取得されています。
私のアドレスの配列は次のようになります
var address = <?php echo $add_js ?>;
私はインターネットやこのフォーラムでも多くの例を経験しましたが、ほとんどの例では、これらのデータベースで緯度と経度がすでに利用可能です。そのアドレスの配列を使用してGoogleマップに複数のマーカーを配置する方法はありますか？またはこのタイプの概念が説明されている例は何ですか？！
JSFIDDLEからこの例を実行しましたが、出力が得られません。
<script>
var geocoder;
var map;
var markersArray = [];
function initialize()
{
geocoder = new google.maps.Geocoder();
latlang = geocoder.geocode( {
'address': 'New Delhi, India'},
function(results, status)
{
if (status == google.maps.GeocoderStatus.OK)
{
map.setCenter(results[0].geometry.location);
marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
markersArray.Push(marker);
}
else
{
alert("Geocode was not successful for the following reason: " + status);
}
});
var myOptions =
{
center: latlang, zoom: 5,
mapTypeId: google.maps.MapTypeId.SATELLITE,
navigationControlOptions:
{
style: google.maps.NavigationControlStyle.SMALL
}
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
plotMarkers();
}
var locationsArray = new Array(
"New Delhi, India", "Gurgaon,Haryana, India", "Mumbai, India",
"Noida Sector-63,India","Banglore, Karnataka,India");
function plotMarkers(){
for(var i = 0; i < locationsArray.length; i++){
codeAddresses(locationsArray[i]);
}
}
function codeAddresses(address){
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
//markersArray.Push(marker);
}
else{
alert("Geocode was not successful for the following reason: " + status);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
回答して複数のマーカーを追加します。
更新（ジオコードの複数のアドレス）
以下に、複数の住所を使用したジオコーディングの例を示します。
_ <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
var delay = 100;
var infowindow = new google.maps.InfoWindow();
var latlng = new google.maps.LatLng(21.0000, 78.0000);
var mapOptions = {
zoom: 5,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var geocoder = new google.maps.Geocoder();
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
var bounds = new google.maps.LatLngBounds();
function geocodeAddress(address, next) {
geocoder.geocode({address:address}, function (results,status)
{
if (status == google.maps.GeocoderStatus.OK) {
var p = results[0].geometry.location;
var lat=p.lat();
var lng=p.lng();
createMarker(address,lat,lng);
}
else {
if (status == google.maps.GeocoderStatus.OVER_QUERY_LIMIT) {
nextAddress--;
delay++;
} else {
}
}
next();
}
);
}
function createMarker(add,lat,lng) {
var contentString = add;
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat,lng),
map: map,
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map,marker);
});
bounds.extend(marker.position);
}
var locations = [
'New Delhi, India',
'Mumbai, India',
'Bangaluru, Karnataka, India',
'Hyderabad, Ahemdabad, India',
'Gurgaon, Haryana, India',
'Cannaught Place, New Delhi, India',
'Bandra, Mumbai, India',
'Nainital, Uttranchal, India',
'Guwahati, India',
'West Bengal, India',
'Jammu, India',
'Kanyakumari, India',
'Kerala, India',
'Himachal Pradesh, India',
'Shillong, India',
'Chandigarh, India',
'Dwarka, New Delhi, India',
'Pune, India',
'Indore, India',
'Orissa, India',
'Shimla, India',
'Gujarat, India'
];
var nextAddress = 0;
function theNext() {
if (nextAddress < locations.length) {
setTimeout('geocodeAddress("'+locations[nextAddress]+'",theNext)', delay);
nextAddress++;
} else {
map.fitBounds(bounds);
}
}
theNext();
</script>
_setTimeout()関数でこの問題を解決できるため。
それでも、@ geocodezipによると、ページを読み込むたびに既知の場所をジオコーディングしないでください
これらの別の選択肢は、次のリンクで非常によく説明されています。
状況に関係なく、住所の配列に基づいて地図上にマーカーを作成する実用的なデモがあります。
埋め込まれたJavascriptコード：
$(document).ready(function () {
var map;
var elevator;
var myOptions = {
zoom: 1,
center: new google.maps.LatLng(0, 0),
mapTypeId: 'terrain'
};
map = new google.maps.Map($('#map_canvas')[0], myOptions);
var addresses = ['Norway', 'Africa', 'Asia','North America','South America'];
for (var x = 0; x < addresses.length; x++) {
$.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address='+addresses[x]+'&sensor=false', null, function (data) {
var p = data.results[0].geometry.location
var latlng = new google.maps.LatLng(p.lat, p.lng);
new google.maps.Marker({
position: latlng,
map: map
});
});
}
});
私の解決策は次のとおりです。
依存関係：Gmaps.js、jQuery
var Maps = function($) {
var lost_addresses = [],
geocode_count = 0;
var addMarker = function() { console.log('Marker Added!') };
return {
getGecodeFor: function(addresses) {
var latlng;
lost_addresses = [];
for(i=0;i<addresses.length;i++) {
GMaps.geocode({
address: addresses[i],
callback: function(response, status) {
if(status == google.maps.GeocoderStatus.OK) {
addMarker();
} else if(status == google.maps.GeocoderStatus.OVER_QUERY_LIMIT) {
lost_addresses.Push(addresses[i]);
}
geocode_count++;
// notify listeners when the geocode is done
if(geocode_count == addresses.length) {
$.event.trigger({ type: 'done:geocoder' });
}
}
});
}
},
processLostAddresses: function() {
if(lost_addresses.length > 0) {
this.getGeocodeFor(lost_addresses);
}
}
};
}(jQuery);
Maps.getGeocodeFor(address);
// listen to done:geocode event and process the lost addresses after 1.5s
$(document).on('done:geocode', function() {
setTimeout(function() {
Maps.processLostAddresses();
}, 1500);
});