如何结合两个谷歌地图API

How combine two Google Maps API

本文关键字：两个谷歌地图 API 结合何结合更新时间：2023-09-26

我在我的网站上使用谷歌地图API做两件事:

第一个用于显示地图:

jQuery(document).ready(function($) {
function initialize_business() {    
            var map_move = $(document).width() > 850 ? true : false;   
            var map_center = new google.maps.LatLng(parseFloat($('#business_sidebar_map').attr('data-lat')), parseFloat($('#business_sidebar_map').attr('data-lng')));
            var map_options = {
                zoom: 14,
                center: map_center,
                zoomControl: false,
                scaleControl: false,
                draggable: false,
                scrollwheel: false,
                mapTypeControl: false,
                streetViewControl: false,
            };
            var map = new google.maps.Map(document.getElementById('business_sidebar_map'), map_options);
            new google.maps.Marker({
                position: map_center,
                map: map,          
                icon: js_string.template_directory + '/images/marker.png'  
            });     
        }
        google.maps.event.addDomListener(window, 'resize', initialize_business);
        google.maps.event.addDomListener(window, 'load', initialize_business);  
});

和这个地图我需要下一个api链接:

<script src="https://maps.googleapis.com/maps/api/js"></script>

其次，我使用谷歌地图API从我的地址查找GPS:

function google_geocoding() {
    var autocomplete = new google.maps.places.Autocomplete(document.getElementById('address'), {
        types: ['geocode'],
        componentRestrictions: {country: 'cz'},
    });
    autocomplete.addListener('place_changed', function() {
        var place = autocomplete.getPlace();
        if (!place.geometry) {
            window.alert('Bohužel jsme nanašli žádnou lokaci');
            return;
        }
        document.getElementById('address_lat').value = place.geometry.location.lat();
        document.getElementById('address_lng').value = place.geometry.location.lng();
    });
}

和这个事件，我需要下一个api链接:

<script src="https://maps.googleapis.com/maps/api/js?libraries=places&region=cz&callback=google_geocoding"></script>

在控制台我看到下一个错误:

你已经在这个页面包含了多次Google Maps API

所以我可能需要将谷歌脚本链接组合为一个，但我不知道如何。

Thanks for help

我找到解决办法了:

调用一次google maps API

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places&region=cz">

而不是回调参数，我简单调用函数，所以最后的脚本是:

jQuery(document).ready(function($) {
    if($('#business_sidebar_map').length > 0) {
        function initialize_business() {    
            var map_move = $(document).width() > 850 ? true : false;   
            var map_center = new google.maps.LatLng(parseFloat($('#business_sidebar_map').attr('data-lat')), parseFloat($('#business_sidebar_map').attr('data-lng')));
            var map_options = {
                zoom: 14,
                center: map_center,
                zoomControl: false,
                scaleControl: false,
                draggable: false,
                scrollwheel: false,
                mapTypeControl: false,
                streetViewControl: false,
            };
            var map = new google.maps.Map(document.getElementById('business_sidebar_map'), map_options);
            new google.maps.Marker({
                position: map_center,
                map: map,          
                icon: js_string.template_directory + '/images/marker.png'  
            });     
        }
        google.maps.event.addDomListener(window, 'resize', initialize_business);
        google.maps.event.addDomListener(window, 'load', initialize_business);  
    }
    if($('#address').length > 0) {
        function google_geocoding() {
            var autocomplete = new google.maps.places.Autocomplete(document.getElementById('address'), {
                types: ['geocode'],
                componentRestrictions: {country: 'cz'},
            });
            autocomplete.addListener('place_changed', function() {
                var place = autocomplete.getPlace();
                if (!place.geometry) {
                    window.alert('Bohužel jsme nanašli žádnou lokaci');
                    return;
                }
                document.getElementById('address_lat').value = place.geometry.location.lat();
                document.getElementById('address_lng').value = place.geometry.location.lng();
            });
            }
            google_geocoding();
        }
    });