[英]How to set my map marker at the center of div when page load
I actually using geocode
.我实际上使用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;
}
}
?>
Here,the map marker is viewed at the top left corner of the map like this,在这里,地图标记在地图的左上角是这样查看的,
And I wrote map.panTo(marker.getPosition());
我写了map.panTo(marker.getPosition());
inside a google.maps.event.addListener(marker, "click", function () {});
在google.maps.event.addListener(marker, "click", function () {});
function.功能。
So,if the marker get clicked I get back to the center of the map.所以,如果标记被点击,我会回到地图的中心。
But I need to show the marker at center once the page loads.但是一旦页面加载,我需要在中心显示标记。
Thank you,谢谢,
By adding two extra parameters in myoptions variable and change position as you want instead of TOP_CENTER in mapTypeControlOptions .通过在myoptions变量中添加两个额外参数并根据需要更改位置而不是mapTypeControlOptions中的TOP_CENTER 。
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 https://developers.google.com/maps/documentation/javascript/examples/control-positioning
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.