Spring MVC - Adding multiple markers to Google Map from the database

Question

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.

Here's what I have so far:

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

<sql:query dataSource="${snapshot}" var="result">
SELECT * from House;
</sql:query>

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

    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 < 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);
</script>
<script
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBiKZEYI58kG67y8dT50HG4ByxMmWHbwXA"
    async defer></script>

It is giving me an error saying "Uncaught ReferenceError: google is not defined"

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?

Answer 1

This code is loading the Google Maps javascript API asynchronously:

<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBiKZEYI58kG67y8dT50HG4ByxMmWHbwXA"
async defer></script>

You should either:

A. load the Google Maps Javascript API synchronously:

remove the "async defer" from the script include
load the Google Maps Javascript API prior to using the google.maps namespace.

B. load it asynchronously and use the callback parameter to execute the code that depends on it once it has loaded:

remove this line google.maps.event.addDomListener(window, 'load', initialize);
change the API include to:

<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBiKZEYI58kG67y8dT50HG4ByxMmWHbwXA
&callback=initialize"
async defer></script>

Spring MVC - Adding multiple markers to Google Map from the database

Question

1 answers

solution1
0 ACCPTED 2016-01-19 15:36:38

Spring MVC - Adding multiple markers to Google Map from the database

Question

1 answers

solution1 0 ACCPTED 2016-01-19 15:36:38

solution1
0 ACCPTED 2016-01-19 15:36:38