显示访问者地理位置和地址弹出使用谷歌地图

Question

我目前在Joomla页面中嵌入了一些JavaScript代码，当访问者启用位置共享时显示他们的位置。我还想弹出地址旁边的位置图标。我使用了地理定位的原始代码，并试图插入另一段代码来弹出地址，但无济于事。我得到的组合代码如下所示。我希望有人能帮助我，我将非常感激。

<script src="http://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js?ver=3.1.2" type="text/javascript"></script>
<script type="text/javascript">
function init() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {
            var myLatlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
            var mapOptions = {
                zoom: 14,
                center: myLatlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById('map'), mapOptions);
            var marker = new google.maps.Marker();
            marker.setPosition(myLatlng);
            marker.setMap(map);
            geocoder.geocode({'latLng': myLatlng}, function(results, status) { 
            if(status == google.maps.GeocoderStatus.OK) { if(results[0]) {
                $('#address_current').text(results[0].formatted_address); 
            } 
            else { 
                alert('No results found'); 
            } 
        } 
        else { 
            var error = { 'ZERO_RESULTS': 'We Could Not Find Your Address' }  
            $('#address_new').html('' + error[status] + ''); } }); 
    }, function() {
            alert("Your browser does not support Geolocation. Update to Google Chrome or Firefox");
        });
    }
}
google.maps.event.addDomListener(window, 'load', init);

,

Answer 1

我得到一个javascript错误与张贴的代码Uncaught ReferenceError: geocoder未定义;如果我修复这个问题并添加所需的HTML，它就可以为我工作了。

工作小提琴

代码片段:

var geocoder = new google.maps.Geocoder();
function init() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {
            var myLatlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
            var mapOptions = {
                zoom: 14,
                center: myLatlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById('map'), mapOptions);
            var marker = new google.maps.Marker();
            marker.setPosition(myLatlng);
            marker.setMap(map);
            geocoder.geocode({'latLng': myLatlng}, function(results, status) { 
            if(status == google.maps.GeocoderStatus.OK) { if(results[0]) {
                $('#address_current').text(results[0].formatted_address); 
            } 
            else { 
                alert('No results found'); 
            } 
        } 
        else { 
            var error = { 'ZERO_RESULTS': 'We Could Not Find Your Address' }  
            $('#address_new').html('' + error[status] + ''); } }); 
    }, function() {
            alert("Your browser does not support Geolocation. Update to Google Chrome or Firefox");
        });
    }
}
google.maps.event.addDomListener(window, 'load', init);

html, body, #map {
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="address_current"></div>
<div id="map" style="border: 2px solid #3872ac;"></div>