无法使用地理位置显示自动缩放地图

Rohitashv Singhal 发表于 Dev

罗希塔什夫·辛哈尔（Rohitashv Singhal）

我正在使用地理位置来显示当前位置，如下所示：

echo '<div style="width:48%;float:left;"><img src="http://maps.google.com/maps/api/staticmap?center='.$lat.','.$long.'&markers=titel:You+are+here|icon:http://tinyurl.com/2ftvtt6|'.$lat.','.$long.'&zoom=17&size=550x450&maptype=roadmap&&sensor=true" width="550" height="450" alt="'.$geodata['formatted_address'].'" \/></div><div style="width:48%;float:right;">';
echo 'Latitude: '.$lat.' Longitude: '.$long.'<br />';

但是它在地图上显示静态图像。我想显示用户可以在其中放大地图的地图。我该如何使用这样的地图？

高沙梅塔

您可以按照以下方式进行操作：

您可以使用iframe

我尝试过使用iframe进行您需要的请求，以显示所需的纬度，经度和缩放结果：

<iframe width="300" height="170" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?q='+YOUR_LAT+','+YOUR_LON+'&hl=es;z=14&amp;output=embed"></iframe><br /><small><a href="https://maps.google.com/maps?q='+data.lat+','+data.lon+'&hl=es;z=14&amp;output=embed" style="color:#0000FF;text-align:left" target="_blank">See map bigger</a></small>

或者

您也可以使用以下代码：

<script type="text/javascript">
    var map;
    var infowindow;
    var marker;
    var geocoder = new google.maps.Geocoder();
    function initialize(address) {
        geocoder.geocode({'address': address}, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                var latitude = results[0].geometry.location.lat();
                var longitude = results[0].geometry.location.lng();
                map = new google.maps.Map(document.getElementById('map'), {
                    center: new google.maps.LatLng(latitude, longitude),
                    zoom: 15,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                });
                marker = new google.maps.Marker({
                    position: new google.maps.LatLng(latitude, longitude),
                    map: map,
                });

                google.maps.event.addListener(marker, 'click', function() {
                    infowindow.open(map, marker);
                });

                google.maps.event.trigger(marker, "click");
            } else {
                alert("Something got wrong " + status);
            }
        });
    }
    jQuery(document).ready(function() {
        initialize("[your address]");
    });
</script>
<div id="map" style="height: 350px; width: 100%;"></div>