リクエストからすべてのマーカーを表示できますが、マップに少し隙間があります。
たとえば、ニューヨークはケベックの近くを指しています。マップを拡大すると、すべてのマーカーが正しい位置に近づきます。
誰もそれを修正する方法を知っていますか?
私のコード:
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.1&sensor=true"></script>
<script type="text/javascript">
//<![CDATA[
var geocoder;
var map;
var timeout = 600;
var address_position = 0;
var address = [
<?php
$_list="";
$_unicite=array();
foreach($search_data as $k => $item)
{
$_address=trim($item->meta_value);
if(!empty($_address))
{
if(!in_array($_address,$_unicite)){
$_unicite[$item->post_id]=$_address;
$_list.='"'.$_address.'",';
}
}
}
if(!empty($_list)) {
$_list=substr($_list,0,abs(strlen($_list)-1));
}
echo $_list;
?>
];
var link = [
<?php
$_list2="";
$_unicite2=array();
foreach($search_data as $k => $item)
{
$_link=trim($item->post_id);
if(!empty($_link))
{
if(!in_array($_link,$_unicite2)){
$_unicite2[$item->post_id]=$_link;
$_list2.='"'.$_link.'",';
}
}
}
if(!empty($_list2)) {
$_list2=substr($_list2,0,abs(strlen($_list2)-1));
}
echo $_list2;
?>
];
var title = [
<?php
$_list3="";
$_unicite3=array();
foreach($search_data as $k => $item)
{
$_title=trim($item->post_title);
if(!empty($_title))
{
if(!in_array($_title,$_unicite2)){
$_unicite2[$item->post_id]=$_title;
$_list3.='"'.$_title.'",';
}
}
}
if(!empty($_list3)) {
$_list3=substr($_list3,0,abs(strlen($_list3)-1));
}
echo $_list3;
?>
];
var image = new google.maps.MarkerImage(
'http://www.bookyourparis.com/images-site/beachflag.png',
new google.maps.Size(28,54),
new google.maps.Point(0,0),
new google.maps.Point(14,54)
);
function addMarker(position)
{
geocoder.geocode({'address': address[position]}, function(results, status)
{
address_position++;
if (address_position < address.length)
{
setTimeout(function() { addMarker(address_position); }, (timeout));
}
if (status == google.maps.GeocoderStatus.OVER_QUERY_LIMIT)
{
setTimeout(function() { addMarker(position); }, (timeout * 3));
}
/**
if (address_position < address.length)
{
if (status == google.maps.GeocoderStatus.OVER_QUERY_LIMIT)
{
setTimeout(function() { addMarker(position); }, (timeout * 3));
} else {
setTimeout(function() { addMarker(address_position); }, (timeout));
}
}
/**/
else if (status == google.maps.GeocoderStatus.OK)
{
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
position: results[0].geometry.location,
map: map,
title:address[position],
icon: image,
});
var contentString = '<div id="content_bulle"><div id="bodyContent_bulle" style="margin-top:5px;">'+
'<h1 style="font-size:1.5em">'+title[position]+
'</h1><h2 style="font-size:1.2em">'+results[0].formatted_address+
'</h2><p style="color:#AF1A40"><a target="_blank" href="?p='+link[position]+'">View</a></p>'+
'</div></div>';
var infowindow = new google.maps.InfoWindow({
content: contentString,
maxHeight: 100
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
});
}
function codeaddress() {
geocoder = new google.maps.Geocoder();
//var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 2,
navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
mapTypeId: google.maps.MapTypeId.HYBRID,
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
addMarker(address_position);
}
function centerMap()
{
map.setCenter(markers[markers.length-1].getPosition());
}
jQuery(window).load( function(){
codeaddress();
});
//]]>
</script>
<div id="map_canvas" style="width: 940px; height: 420px;border:1px solid #999"></div>