ページロード時にdivの中央にマップマーカーを設定する方法

Question

実際にgeocodeを使用しています。

<?php 
if($_REQUEST){ 

$data_arr = geocode($_REQUEST['search_city']); 

if($data_arr){ 

$latitude = $data_arr[0]; 
$longitude = $data_arr[1]; 
$formatted_address = $data_arr[2]; 

?> 

<div id="map_canvas" style="/*width:100%;*/ height:300px;"> 
    Loading map... 
</div> 

<script type="text/javascript" src="http://maps.google.com/maps/api/js"></script> 
<script type="text/javascript"> 
function init_map() { 
    var myOptions = { 
    zoom: 20, 
    center: new google.maps.LatLng(<?php echo $latitude; ?>,<?php echo $longitude; ?>), 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
    marker = new google.maps.Marker({ 
    map: map, 
    position: new google.maps.LatLng(<?php echo $latitude; ?>,<?php echo $longitude; ?> 
     ), 
     title: '<?php echo $formatted_address; ?> 
     }); 
     var bounds = new google.maps.LatLngBounds(); 
     bounds.extend(myLatLng); 
     map.fitBounds(bounds); 

     infowindow = new google.maps.InfoWindow({ 
     content: " 
    <?php echo $formatted_address; ?> 
     " 
     }); 
     google.maps.event.addListener(marker, "click", function() { 
     map.panTo(marker.getPosition()); 
     infowindow.open(map, marker); 

     }); 
     infowindow.open(map, marker); 
} 

    google.maps.event.addDomListener(window, 'load', init_map); 
</script> 

<?php 

}else{ 
echo "No map found."; 
} 
} 

function geocode($address) { 

    $address = urlencode($address); 

    $url = "http://maps.google.com/maps/api/geocode/json?address={$address}"; 
    $resp_json = file_get_contents($url); 
    $resp = json_decode($resp_json, true); 
    if ($resp['status'] == 'OK') { 

     $lati = $resp['results'][0]['geometry']['location']['lat']; 
     $longi = $resp['results'][0]['geometry']['location']['lng']; 
     $formatted_address = $resp['results'][0]['formatted_address']; 

     if ($lati && $longi && $formatted_address) { 

      $data_arr = array(); 

      array_push($data_arr, $lati, $longi, $formatted_address); 
      return $data_arr; 

     } else { 
      return false; 
     } 

    } else { 
     return false; 
    } 
} 
?> 

ここで、マップマーカーは、このようなマップの左上隅に

を見たと私はgoogle.maps.event.addListener(marker, "click", function() {});関数内map.panTo(marker.getPosition());を書いています。

マーカーがクリックされると、地図の中央に戻ります。

しかし、一度ページが読み込まれると、中央にマーカーを表示する必要があります。あなたの代わりにTOP_CENTERでmapTypeControlOptionsの望むよう

はmyoptions変数と変化する位置に2つの追加のパラメータを追加することにより、

Answer 1

、ありがとうございました。

var myOptions = { 
    zoom: 20, 
    center: new google.maps.LatLng(<?php echo $latitude; ?>, <?php echo $longitude; ?>), 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
    mapTypeControl: true, 
    mapTypeControlOptions: { 
     style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR, 
     position: google.maps.ControlPosition.TOP_CENTER 
    } 
}; 

https://developers.google.com/maps/documentation/javascript/examples/control-positioning