June 05, 2014

Multiple Marker on Google Map

Google Map to view multiple marker example

Description :How to add google map to your java application: To view multiple markers on same google map. while clicking on the marker, the details of that branch will be shown in a separate div. The website can be useful for large business firms to show their branches. The first 3 line of code is of java spring ( No need of it for google map). Here we use simple google map marker instead of complex one.

the css for the html page is shown below (javasourcecode.css)

You can see a combo box on the google map, currently that feature won t work, working code for that will be updated shortly. The location details can be added through json object, using jquery and ajax will smooth-en your code.

Java Google Map multiple marker apps
Google map with multiple marker

jquery google map maker in java web application

<%@taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title> Who will be the winner of football world cup 2014 </title>
      <link href="css/javasourcecode.css" rel="stylesheet" type="text/css" />

  <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
  <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.1.min.js"></script>
  <script type="text/javascript" src="js/units.js"></script>

function initialize() {
  var mapOptions = {
    zoom: 11,
    center: new google.maps.LatLng(1.319154,5.918564)
  var map = new google.maps.Map(document.getElementById('map-canvas'),

  setMarkers(map, beaches);
var infowindow = new google.maps.InfoWindow({
    maxWidth: 160
// get javascript object here pass it to beach
//var triveniUnits = getUnits();
//alert(' Winner : '+triveniUnits.length);
var beaches = [
  ['Brazil', 1.253069,5.78281,'images/worldcup.png',4],
  ['Argentina', 1.291158,75.74415,'images/worldcup.png',5],
  ['Belgium', 1.273474,5.774783,'images/worldcup.png',3],
  ['Spain', 1.294241,5.815177,'images/worldcup.png',2],
  ['England ', 1.305014,5.876385,'images/worldcup.png',1]

function setMarkers(map, locations) {
  var markers = new Array();
  var marker;
  for (var i = 0; i < locations.length; i++) {
    var beach = locations[i];
    var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
        marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
title: beach[0],
        //zIndex: beach[3]
google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
            //var infoWinwhtml = '<div id="infowindow" style="width:320px; height:200px;" ><H4>'+locations[i][0]+'</H4></br><p><img src="'+locations[i][3]+'" alt="World cup football 2014"></p></div>';
             var infoWinwhtml = '<div id="infowindow"><H4>'+locations[i][0]+'</H4></div>';
             var infoHtml = '<div  class="triveniInfo"><H4>'+locations[i][0]+'</H4></br><p><img src="'+locations[i][3]+'" alt="Triveni Image"><h6> Distance : 200km </h6></p></div>';
              infowindow.open(map, marker);
              var sidediv = document.getElementById('content-window');
              sidediv.innerHTML = infoHtml;
          })(marker, i));

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

  <div id="headerId" class="header">
<div id="logo" class="logos"><img src="images/worldcupLogo.jpg" alt="cfed Logo"></div>
<h1> How to integrate Google map features in java spring source code</h1>
<div id="menuTabsId" class="menuTabs"><a href="worldcupEvents.html"> event</a><a href="worldcupmap.html"> view map </a></div>

  <div id="panel">
  <b>Select: </b>
    <select id="worldcup football" onchange="calcRoute();">
      <option value="worldcup">Belgium</option>
      <option value="st louis, mo">Germany</option>
      <option value="joplin, mo">Spain</option>
      <option value="oklahoma city, ok">England</option>
      <option value="amarillo, tx">Brazil</option>
    <div id="map-canvas" style="width:80%; height:80%; float:left"></div>
    <div id="content-window" style="width:20%; height:80%; float:left"></div>

  <div id="footerId" class="footer">


/*External Cascading style sheet for the above html code*/

/* Google map css */

html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px

#panel {
        position: absolute;
        top: 120px;
        left: 20%;
        margin-left: -180px;
        z-index: 5;
        background-color: #fff;
        padding: 5px;
        border: 1px solid #999;

/* Developed by shimjith kumar */
+Shimjith Kumar 

    float: left;

    background-color: #EEEEEE;

.header h1{
    margin-bottom: 0;
    text-align: center;

      background-color: #FFA500;
    height: 2%;
    clear: both;
    text-align: center;


/*  external css design in java application */
.triveniInfo h4{
    text-align: center;
.triveniInfo p{
    text-align: center;

/* google map info window css design */
#infowindow h4{
    text-align: center;
#infowindow p{
    text-align: center;

Thanks for reading the code, Please provide your feedback through comments

author : +Shimjith


Facebook comments