title: Display markers on Google Map using Spring MVC
body: <p>I am trying to display markers by getting latitude and longitude frome database. The problem is I'm stuck in the view part.</p>
  
  <p>I'll share with my jsp file where I want to display a list of markers into Google Map with JavaScript API. </p>
  
  <p><code>map.jsp</code>:</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/core" prefix="c" %&gt;
  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
  
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta name="viewport" content="initial-scale=1.0, user-scalable=no"&gt;
      &lt;title&gt;Auxilium Saver&lt;/title&gt;
      &lt;style&gt;
          #map-canvas {
            height: 600px;
            height: 600px;
            margin: 0px;
            padding: 0px
          }
      &lt;/style&gt;
      &lt;script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?"&gt;&lt;/script&gt;
  
      &lt;script type="text/javascript"&gt;
          var markerLat, markerLong;
          markerLat = [
              &lt;c:forEach var="s" items="${listGeo}" varStatus="status"&gt;
                  [&lt;c:out value="${s.latitude}"/&gt;,
              &lt;/c:forEach&gt;];
          markerLong = [
            &lt;c:forEach var="s" items="${listGeo}" varStatus="status"&gt;
                [&lt;c:out value="${s.longitude}"/&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-canvas'), 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;/head&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><code>MapController.java</code>:</p>
  
  <pre><code>@Controller
  public class MapController {
  
      @Autowired
      private GeolocDAO geolocDAO;
  
      @RequestMapping(value = "/", method = RequestMethod.GET)
      public ModelAndView getPages(HttpServletRequest request) {
          Geolocation geoloc = geolocDAO.get();
          ModelAndView model = new ModelAndView("map");
          List&lt;Geolocation&gt; listGeo = geolocDAO.list();
          model.addObject("listGeo", listGeo);
          return model;
      }
  
  }
  </code></pre>