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.
 | |
| 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"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<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>
<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'),
mapOptions);
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]
});
markers.push(marker);
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>';
//infowindow.setContent(locations[i][0]);
var infoWinwhtml = '<div id="infowindow"><H4>'+locations[i][0]+'</H4></div>';
infowindow.setContent(infoWinwhtml);
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>';
marker.setAnimation(google.maps.Animation.BOUNCE);
infowindow.open(map, marker);
var sidediv = document.getElementById('content-window');
sidediv.innerHTML = infoHtml;
}
})(marker, i));
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<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>
<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>
</select>
</div>
<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">
http://nikzblog/</div>
</body>
</html>
javasourcecode.css
/*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
.logos{
float: left;
}
.header{
height:100px;
background-color: #EEEEEE;
}
.header h1{
margin-bottom: 0;
text-align: center;
}
.footer{
background-color: #FFA500;
height: 2%;
clear: both;
text-align: center;
}
.menuTabs{
position:relative;
top:0px;
width:80px;
height:20px;
float:right;
}
/* 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
http://javabelazy.blogspot.in/
No comments:
Post a Comment
Your feedback may help others !!!