使用Google地图地理位置标记多个位置

Question

我有一个地图设置，以及一组类型为'locs'的html元素。我想迭代这些，并用标记在Google地图上标记它们。但是，任何标记多个的尝试都会失败。任何帮助或指导？这是我目前的代码：

编辑：这是控制台日志：

test.php:68 Uncaught ReferenceError: google is not defined
at test.php:68
jquery.min.js:2 Uncaught TypeError: Cannot read property 'geocode' of 
undefined
    at codeAddress (test.php:36)
    at HTMLOptionElement.<anonymous> (test.php:52)
    at Function.each (jquery.min.js:2)
    at r.fn.init.each (jquery.min.js:2)
    at HTMLDocument.<anonymous> (test.php:50)
    at j (jquery.min.js:2)
    at k (jquery.min.js:2)
js?key=KEY_HERE&callback=initMap:100 
Uncaught Lb

编辑＃2：这是完整的代码：

    <?php
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);

$events = json_decode(file_get_contents('https://data.melbourne.vic.gov.au/resource/5vsv-f73x.json?$$app_token=KEY_HERE'), true);
$counter = 0;

$seats = json_decode(file_get_contents('https://data.melbourne.vic.gov.au/resource/w4fc-iq27.json?$$app_token=KEY_HERE'), true);


?>

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>
        var geocoder;
        var map;
        function initialize() {
            geocoder = new google.maps.Geocoder();
            var latlng = new google.maps.LatLng(-34.397, 150.644);
            var mapOptions = {
                zoom: 15,
                center: latlng
            }
            map = new google.maps.Map(document.getElementById('map'), mapOptions);
        }

        function codeAddress(big) {
            var address = big + ", Melbourne";

            geocoder.geocode({'address': address}, function (results, status) {
                if (status == 'OK') {
                    map.setCenter(results[0].geometry.location);
                    var marker = new google.maps.Marker({
                        map: map,
                        position: results[0].geometry.location
                    });
                } else {
                    alert('Geocode was not successful for the following reason: ' + status);
                }
            });

        }
        $(document).ready(function() {


            $('.locs').each(function () {
                alert($(this).text());
                codeAddress($(this).text());
            });
        });




        var arse;
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function(position) {
                var pos = {
                    lat: position.coords.latitude,
                    lng: position.coords.longitude
                };


                arse = new google.maps.Marker({
                    position: new google.maps.LatLng(pos['lat'], pos['lng']),
                    map: map,
                    icon: 'https://rnr30-compgroup.netdna-ssl.com/wp-content/themes/rnr3/img/distance_marker.png'
                });

                map.setCenter(pos);
                map.setZoom(12);

                var cityCircle = new google.maps.Circle({
                    strokeColor: '#FF0000',
                    strokeOpacity: 0.8,
                    strokeWeight: 2,
                    fillColor: '#FF0000',
                    fillOpacity: 0.35,
                    map: map,
                    center: pos,
                    radius: 10000
                });

            }, function() {
            });
        } else {
            // Browser doesn't support Geolocation
        }
    </script>
    <style>
        #map {
            height: 400px;
            width: 100%;
        }
    </style>
</head>
<body onload="initialize()">
<div id="map" style="width: 320px; height: 480px;"></div>

<?php
echo "<select id='loc' onchange='codeAddress()'>";
foreach($events as $event)
{
    //print_r($event);
    echo "<option class='locs' value='loc".$counter."'>".$event['location']."</div> <br>";
    $counter++;
}
echo "</select>";
?>
</body>
<script async defer
        src="https://maps.googleapis.com/maps/api/js?key=KEY_HERE&callback=initMap">
</script>
</body>
</html>