JS和谷歌地图 - 在标记上居中地图

时间:2014-05-16 18:24:04

标签: javascript google-maps google-maps-embed

我无法使用标记使地图居中,这里是b *:

           <iframe
          width="555"
          height="450"
          frameborder="0" style="border:0"
          src="https://www.google.com/maps/embed/v1/place?key=***&q=<? echo urlencode($address); ?>&zoom=14">
        </iframe>

地图加载,但屏幕左上角有标记,因此用户必须使用鼠标将所需区域真正放在屏幕上。

有人知道如何使用标记位置居中地图吗?

对于这个重复的问题感到抱歉,但到目前为止我看到的那些小姐在我的情况下没有用。

1 个答案:

答案 0 :(得分:0)

可悲的是,我无法使用iframe,而是使用了JS方式...

JS:

geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(40.730885,-73.997383);
var mapOptions = {
    scrollwheel: true,
    zoom: 15,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map"), mapOptions );

var address = 'address string';
geocoder.geocode(
{ 'address': address},
function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
        map.setCenter(results[0].geometry.location);

        var latitude = results[0].geometry.location.lat();
        var longitude = results[0].geometry.location.lng();

        marker = new google.maps.Marker({
            draggable: true,
            map: map,
            position: results[0].geometry.location
        });
    } else {
        //alert('Location not found.');
    }
}
);

HTML:

        <div id="map-canvas">
            <div id="map" style="width:555px;height:450px;"></div>
    </div>
    <script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=true"></script>

我避免使用导致另一个问题,当页面加载时,CSS显示为null ...但是这已经解决了(没有理由解释原因是如何导致问题^^“)。< / p>

无论如何,如果有人找到我为iframe示例的解决方案,仍然会很有趣......但那是所有人o /