使用wordpress模板调用API密钥调用多个谷歌地图

Question

I have the following code for my website, basically I want to display 2 google maps with different locations:

function lokacije(){
$output=" <div id='map'></div>
<script>
    function initMap() {
        var lokacija = {lat: 45.3592940, lng: 14.3495750};
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 16,
            draggable: false,
            scrollwheel: false,
            center: lokacija
        });
        var marker = new google.maps.Marker({
            position: lokacija,
            map: map,
            icon:'http://www.omniaprijevodi.hr/wp 
            content/uploads/2016/06/map_marker.png'
        });
      }
    </script>
    <script async defer src='https://maps.googleapis.com/maps/api/js? 
    key=AIzaSyAglKEMduJgZf1nN42mHkzeNA4jjpI0JA0&callback=initMap'>
    </script>                                               
    ";  

return $output;     
}
add_shortcode("lokacije","lokacije");


function lokacije2(){
    $output=" <div id='map'></div>
    <script>
    function initMap() {
        var lokacija = {lat: 45.813236, lng: 15.996887};
        var map = new google.maps.Map(document.getElementById('map'), {
           zoom: 16,
           draggable: false,
           scrollwheel: false,
           center: lokacija
        });
        var marker = new google.maps.Marker({
            position: lokacija,
            map: map,
            icon:'http://www.omniaprijevodi.hr/wp- 
            content/uploads/2016/06/map_marker.png'
        });
      }
    </script>
    <script async defer src='https://maps.googleapis.com/maps/api/js? 
    key=AIzaSyAglKEMduJgZf1nN42mHkzeNA4jjpI0JA0&callback=initMap'>
    </script>                                               
    ";  

return $output;     
}
add_shortcode("lokacije2","lokacije2");

I call [lokacije] and [lokacije2] from Wordpress template, but I can't get to display them both, in fact none is displayed. Even if I call [lokacije] twice, I get the map to display only the first time - the second time it doesn't appear. Can someone please help me what I'm doing wrong because I'm having a hard time with this one?

Thank you very much in advance!

Answer 1

First, make sure google api script is loaded before you call the api, and you have to load the script only once. Secondly, your JS code redefines initMap(). Thirdly, you use the same element with ID = map for both maps.

Use wp_enqueue_script() to load the scripts: https://developer.wordpress.org/reference/functions/wp_enqueue_script/

and have something like this for the js:

function initMap(element, lat, lng)
{
    var map = new google.maps.Map(element, {
       zoom: 16,
       draggable: false,
       scrollwheel: false,
       center: {lat:lat, lng:lng};
    });
}

and for the php (assuming you have jquery loaded):

function lokacije1()
{
    return sprintf('<div map lat="12.34" lng="56.78"></div>');
}