Spring MVC - Adding multiple markers to Google Map from the database
<p>I am trying to display multiple markers on a map from my database. I have looked at other examples and have Google's examples working on my server, but can't seem to get it working with database information. </p>

<p>Here's what I have so far:</p>

<pre><code>&lt;%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%&gt;
&lt;%@ taglib uri="http://java.sun.com/jsp/jstl/sql" prefix="sql"%&gt;
&lt;%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Simple Map&lt;/title&gt;
&lt;meta name="viewport" content="initial-scale=1.0"&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;sql:setDataSource var="snapshot" driver="com.mysql.jdbc.Driver"
    url="jdbc:mysql://localhost/project" user="root" password="root" /&gt;

&lt;sql:query dataSource="${snapshot}" var="result"&gt;
SELECT * from House;
&lt;/sql:query&gt;

&lt;div id="map"&gt;&lt;/div&gt;
&lt;script type="text/javascript"&gt;
    var markerLat, markerLong;
    markerLat = [
        &lt;c:forEach var="s" items="${result.rows}"&gt;
            &lt;c:out value="${s.lat}"/&gt;,
        &lt;/c:forEach&gt;;
    markerLong = [
      &lt;c:forEach var="s" items="${result.rows}"&gt;
          &lt;c:out value="${s.lng}"/&gt;,
      &lt;/c:forEach&gt;;

    function initialize() {
        var map;
        var initlatlng = new google.maps.LatLng(markerLat[0],markerLong[0]);
        var mapOptions = {
            zoom: 6,
            center: new google.maps.LatLng(36,5),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById('map'), mapOptions);
        var infowindow = new google.maps.InfoWindow(); 
        var marker, i;

        for (i = 0; i &lt; markerLat.length; i++) {
            marker = new google.maps.Marker({
                position: new google.maps.LatLng(markerLat[i], markerLong[i]),
                map: map
            });

            google.maps.event.addListener(marker, 'click', (function(marker, i) {
                return function() {
                    infowindow.setContent(markers[i]);
                    infowindow.open(map, marker);
                }
            })(marker, i));
        }
    }

    google.maps.event.addDomListener(window, 'load', initialize);
&lt;/script&gt;
&lt;script
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBiKZEYI58kG67y8dT50HG4ByxMmWHbwXA"
    async defer&gt;&lt;/script&gt;
</code></pre>

<p>
</p>

<p>It is giving me an error saying "Uncaught ReferenceError: google is not defined"</p>

<p>Could anyone tell me what I'm doing wrong or direct me to other examples of adding multiple markers to a map from a database?</p>