This tutorial is intended to help you incorporate Google Map in Applications Manager. The Google Maps API embed Google Maps in web pages with JavaScript .
In order to be able to use Google Maps, the Google APIs have to be present, if not, then manually installed.
Steps to configure Google Map in Applications Manager web client
To incorporate your Monitor Groups in Google Map View follow the below steps:
CREATING AN HTML DOCUMENT: Create a new html document MapView.html in the product. Say for Eg. Appmanager home directory / working / maps / mapview.html .
IMPORTING GOOGLE'S JAVASCRIPT: Include the following content in the html document.
<html>
<script type="text/javascript"src="http://maps.google.com/maps/api/js?sensor=false"></script>
This is done in order to import google's javascript and use their functions.
MAPS INITIALIZATION AND FETCHING DATA: Next include the following content in the html document:
<script type="text/javascript">
var map;
var prevoverlay ;
function initialize(zoom,xcoord,ycoord,newlocation) {
var mapDiv = document.getElementById('mapView');
map = new google.maps.Map(mapDiv, {
center: new google.maps.LatLng(xcoord, ycoord),
zoom: zoom,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
if(!newlocation){
google.maps.event.addListenerOnce(map, 'tilesloaded', addMapMarkers);
} else
{
google.maps.event.addListener(map, 'click', function(event) {
var coordinates = event.latLng.toString().split(",");
var xcoord = coordinates[0];
xcoord = coordinates[0].substring(1);
var ycoord = coordinates[1];
ycoord = ycoord.substring(0,ycoord.length-1)
document.getElementById('xcoord').value = xcoord;
document.getElementById('ycoord').value = ycoord;
if(prevoverlay){
prevoverlay.setMap(null)
}
placeMarker(event.latLng)
});}}
The above function is for map initialization and displaying the Monitor Groups located across the world.
SAVING ZOOM LEVELS: Next include the following two functions in the html document:
function setDefault(){
var zoomlevel = map.getZoom();
var coordinates = map.getCenter().toString().split(",");
var xcoord = coordinates[0];
xcoord = coordinates[0].substring(1);
var ycoord = coordinates[1];
ycoord = ycoord.substring(0,ycoord.length-1)
return customsetDefault(xcoord,ycoord,zoomlevel)
}
This function is used for saving the current zoom level
function placeMarker(location) {
var locationmarker = new google.maps.Marker({
position: location,
map: map,
icon:'/images/marker0.png'
});
prevoverlay = locationmarker;
}This function is used for adding a new location in the map.
RENDERING MONITOR GROUP INFORMATION: Include the following function in the html Document:
infos = [];
function createMapMarker(markerele)
{ var monitorname1 =markerele.getAttribute("monitorname");
monitorname1=unescape(monitorname1.replace(/\+/g, " "));
var rca1 = markerele.getAttribute("rca");
var place1 =markerele.getAttribute("place");
var lat = markerele.getAttribute("lat");
var lng = markerele.getAttribute("lng");
var iconpath =markerele.getAttribute("icon");
var point = new google.maps.LatLng(parseFloat(lat),parseFloat(lng));
var image = new google.maps.MarkerImage(iconpath,new google.maps.Size(20, 30),new google.maps.Point(0,0),new google.maps.Point(10, 30));
var shadow = new google.maps.MarkerImage(iconpath,new google.maps.Size(22, 20),new google.maps.Point(0,0),new google.maps.Point(10, 30));
var marker = new google.maps.Marker({
position: point,
map: map,
icon: image,
shadow: shadow,
title: monitorname1
});
var content = "<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"250px\"><tr><td align=\"left\"><span class=\"bodytext\"><b>"+monitorname1 + "</b> : "+ rca1 +"<br>"+place1+"</td></tr></table>";
var infowindow = new google.maps.InfoWindow({
content: content,
position: point
});
google.maps.event.addListener(marker, 'click', function() {
closeInfos();
infowindow.open(map, marker);
infos[0]=infowindow;
});
}
function closeInfos(){
if(infos.length > 0){
infos[0].set("marker",null);
infos[0].close();
infos.length = 0;
}}</script> </html>
This function is used for rendering the Monitor Group information inside the map view.
Place the html document in the directory to configure Google Map View: Appmanager/working/html/MapView.html.
Important:
Get to know and verify the Google Map API Terms of Use