google지도에서 파일 변수 "street address"의 목록을 복수 핀으로 변환

Question

Google지도의 여러 핀에 json 파일 변수 ("주소") 목록을 잃어 버리면됩니다.

내 json 파일은 다음과 같습니다.

{ 
"address_number": { 
    "address": "20 test ct", 
    "time": "10:00 PM", 
    "show_address": "false", 
    "code": "000000" 
}, 
"address_number2": { 
    "address": "20 test ct", 
    "time": "10:00 PM", 
    "show_address": "false", 
    "code": "000002" 
}, 
"916788": { 
    "address": "test addy ct", 
    "date": "0011-11-11", 
    "time": "11:11", 
    "show_address": "True", 
    "code": "11111" 
}, 
"519802": { 
    "address": "20 test ct", 
    "date": "", 
    "time": "", 
    "show_address": "", 
    "code": "000000" 
}, 
"586910": { 
    "address": "20 test ct", 
    "date": "", 
    "time": "", 
    "show_address": "", 
    "code": "000000" 
} 

은 어떻게 ("주소")을 타고 핀이 클릭 될 때 상기 다른 데이터 세트가 메모로 표시되는 동안지도에 여러 개의 핀으로 변환 할 수 있습니다.

$.ajax({ 
url: './add_address/data.json', 
dataType: 'json', 
type: 'get', 
cache: true, 

success: function (data) { 
    $(data.address_number).each(function (index, value) { 
     console.log(value.name); 
    }) 
}}); 

위의 아이디어는 내가 얻은 유일한 아이디어입니다.

Answer 1

관련 질문 : Google Maps V3 infowindows displaying wrong content on pins이

처리하여 JSON 객체를 통해 그것의 각 요소에 Google Maps Javascript API Geocoder 호출 다음 geocode 기능에

for (obj in inputJson) { 
    geocode(obj, inputJson[obj]); 
}; 

,지도에 반환 된 주소에 마커를 추가, "기타"정보가 포함 된 정보 창을 추가하려면 정보 닫는 창 (IIFE)을 사용하여 정보 창에있는 입력 데이터를 마커와 연결하십시오.

// modified from https://developers.google.com/maps/documentation/javascript/examples/geocoding-simple 
function geocode(name, obj) { 
    geocoder.geocode({ 
    'address': obj.address 
    }, function(results, status) { 
    if (status === 'OK') { 
     bounds.extend(results[0].geometry.location); 
     map.fitBounds(bounds); 
     var marker = new google.maps.Marker({ 
     map: map, 
     position: results[0].geometry.location 
     }); 
     // modified from https://stackoverflow.com/questions/3059044/google-maps-js-api-v3-simple-multiple-marker-example 
     google.maps.event.addListener(marker, 'click', (function(marker, obj) { 
     return function(evt) { 
      var contentString = '<b>' + name + "</b><br>"; 
      for (attr in obj) { 
      contentString += attr + ":" + obj[attr] + "<br>"; 
      } 
      infowindow.setContent(contentString); 
      infowindow.open(map, marker); 
     } 
     })(marker, obj)); 
    } else { 
     alert('Geocode was not successful for the following reason: ' + status); 
    } 
    }); 
} 

참고 : 많은 수의 마커 (대용량이 약 10 개 이상)의 경우이면 Google지도 지오 코딩 서비스의 할당량/속도 제한을 초과하므로 OVER_QUERY_LIMIT 결과를 처리해야합니다.

proof of concept fiddle

코드는 :

var geocoder; 
 
var map; 
 
var bounds; 
 
var infowindow; 
 
// modified from https://developers.google.com/maps/documentation/javascript/examples/geocoding-simple 
 
function geocode(name, obj) { 
 
    geocoder.geocode({ 
 
    'address': obj.address 
 
    }, function(results, status) { 
 
    if (status === 'OK') { 
 
     bounds.extend(results[0].geometry.location); 
 
     map.fitBounds(bounds); 
 
     var marker = new google.maps.Marker({ 
 
     map: map, 
 
     position: results[0].geometry.location 
 
     }); 
 
     // modified from https://stackoverflow.com/questions/3059044/google-maps-js-api-v3-simple-multiple-marker-example 
 
     google.maps.event.addListener(marker, 'click', (function(marker, obj) { 
 
     return function(evt) { 
 
      var contentString = '<b>' + name + "</b><br>"; 
 
      for (attr in obj) { 
 
      contentString += attr + ":" + obj[attr] + "<br>"; 
 
      } 
 
      infowindow.setContent(contentString); 
 
      infowindow.open(map, marker); 
 
     } 
 
     })(marker, obj)); 
 
    } else { 
 
     alert('Geocode was not successful for the following reason: ' + status); 
 
    } 
 
    }); 
 
} 
 

 
function initialize() { 
 
    map = new google.maps.Map(
 
    document.getElementById("map_canvas"), { 
 
     center: new google.maps.LatLng(37.4419, -122.1419), 
 
     zoom: 13, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }); 
 
    geocoder = new google.maps.Geocoder(); 
 
    bounds = new google.maps.LatLngBounds(); 
 
    infowindow = new google.maps.InfoWindow(); 
 
    for (obj in inputJson) { 
 
    geocode(obj, inputJson[obj]); 
 
    }; 
 
} 
 
google.maps.event.addDomListener(window, "load", initialize); 
 
var inputJson = { 
 
    "address_number": { 
 
    "address": "New York, NY", 
 
    "time": "10:00 PM", 
 
    "show_address": "false", 
 
    "code": "000000" 
 
    }, 
 
    "address_number2": { 
 
    "address": "Newark, NJ", 
 
    "time": "10:00 PM", 
 
    "show_address": "false", 
 
    "code": "000002" 
 
    }, 
 
    "916788": { 
 
    "address": "Baltimore, MD", 
 
    "date": "0011-11-11", 
 
    "time": "11:11", 
 
    "show_address": "True", 
 
    "code": "11111" 
 
    }, 
 
    "519802": { 
 
    "address": "Boston, MA", 
 
    "date": "", 
 
    "time": "", 
 
    "show_address": "", 
 
    "code": "000000" 
 
    }, 
 
    "586910": { 
 
    "address": "Philadelphia, PA", 
 
    "date": "", 
 
    "time": "", 
 
    "show_address": "", 
 
    "code": "000000" 
 
    } 
 
};

html, 
 
body, 
 
#map_canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map_canvas"></div>