Google Maps API markers not placing

Question

I'm trying to place some markers on the map here but no luck. Well actually it does show one marker which was called from the header as so:

<script type="text/javascript"
  src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC5Hacj2nz6Uby-AeesTPo8JVH5uGOnwlc">
</script>
<script type="text/javascript">
var myCenter=new google.maps.LatLng(51.508742,-0.120850);
var map;
var markers;

function initialize()
{
var mapProp = {
    center:myCenter,
    zoom:5,
    mapTypeId:google.maps.MapTypeId.ROADMAP
    };

map=new google.maps.Map(document.getElementById("googleMap"),mapProp);

var marker=new google.maps.Marker({
    map: map,
    position:myCenter

});
}

google.maps.event.addDomListener(window, 'load', initialize);

</script>

that works, but when I try to add more markers, they don't come up. I'm using php with it so the code I'm running looks like this:

<?php

        global $wpdb;
            $results = $wpdb->get_results("SELECT * FROM REPORTS");

        foreach($results as $row){ ?>
            <script type="text/javascript">
                markers=new google.maps.Marker({
                    map:map,
                    position:new google.maps.LatLng(52,41)
                });
            </script>
        <?php
        } ?>

I should also mention that I'm using wordpress. This code checks out with no errors, and the echoes return a value so I don't know what it is, I started learning js/mysql last night. Thanks in advance!

Answer 1

Change your approach a bit. Try reading out the data inside your JavaScript instead of creating a new script element for each marker. Then loop over this data with JavaScript to create the markers.