Vote count:
0
HTML
map.js - This is the javascript to load the google map
var latlng = new google.maps.LatLng(1.3000, 103.8000);
var mapTypeIds = ["SEA", "OSMBW", "PublicTransport", "Skobbler", "MapQuest", "OpenCycleMap", "OCMTransport-D", "OCMTransport-L", "OCMLandscape", "OCMOutdoor"];
for (var type in google.maps.MapTypeId) {
mapTypeIds.push(google.maps.MapTypeId[type]);
}
var mapOptions = {
zoom: 12,
center: latlng,
panControl: false,
zoomControl: false,
mapTypeControl: true,
//mapTypeId: "",
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
//style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
mapTypeIds: mapTypeIds,
position: google.maps.ControlPosition.TOP_LEFT
},
streetViewControl: true,
streetViewControlOptions: {
position: google.maps.ControlPosition.TOP_LEFT
},
scaleControl: true,
overviewMapControl: true
}
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
//Transit Layer - off
//Start
/*=================================================*/
//var transitLayer = new google.maps.TransitLayer();
//transitLayer.setMap(map);
/*=================================================*/
//End
//Traffic Layer - On
//Start
/*=================================================*/
var controlDiv = document.createElement('DIV');
$(controlDiv).addClass('gmap-control-container')
.addClass('gmnoprint');
var controlUI = document.createElement('DIV');
$(controlUI).addClass('gmap-control');
$(controlUI).text('Traffic');
$(controlDiv).append(controlUI);
var legend = '<ul>'
+ '<li><span style="background-color: #30ac3e"> </span><span style="color: #30ac3e"> > Smooth Traffic</span></li>'
+ '<li><span style="background-color: #ffcf00"> </span><span style="color: #ffcf00"> Slow Moving Traffic</span></li>'
+ '<li><span style="background-color: #ff0000"> </span><span style="color: #ff0000"> < Heavy Traffic</span></li>'
+ '<li><span style="background-color: #c0c0c0"> </span><span style="color: #c0c0c0"> No data available</span></li>'
+ '</ul>';
var controlLegend = document.createElement('DIV');
$(controlLegend).addClass('gmap-control-legend');
$(controlLegend).html(legend);
$(controlLegend).hide();
$(controlDiv).append(controlLegend);
// Set hover toggle event
$(controlUI)
.mouseenter(function () {
$(controlLegend).show();
})
.mouseleave(function () {
$(controlLegend).hide();
});
var trafficLayer = new google.maps.TrafficLayer();
google.maps.event.addDomListener(controlUI, 'click', function () {
if (typeof trafficLayer.getMap() == 'undefined' || trafficLayer.getMap() === null) {
$(controlUI).addClass('gmap-control-active');
trafficLayer.setMap(map);
} else {
trafficLayer.setMap(null);
$(controlUI).removeClass('gmap-control-active');
}
});
map.controls[google.maps.ControlPosition.TOP_LEFT].push(controlDiv);
//Traffic Layer - On
//End
/*=================================================*/
//Open Street Map Layer - On
/*=================================================*/
//Start
//map.mapTypes.set("OSM", new google.maps.ImageMapType({
// getTileUrl: function (coord, zoom) {
// return "http://ift.tt/Pzvta5" + zoom + "/" + coord.x + "/" + coord.y + ".png";
// },
// tileSize: new google.maps.Size(256, 256),
// name: "Standard",
// alt: "Show Open Street Map",
// maxZoom: 20
//}));
//End
/*=================================================*/
//SEA Layer - On
/*=================================================*/
//Start
map.mapTypes.set("SEA", new google.maps.ImageMapType({
getTileUrl: function (coord, zoom) {
return "http://ift.tt/1CUb8BC" + zoom + "/" + coord.x + "/" + coord.y + ".png";
},
tileSize: new google.maps.Size(256, 256),
name: "Multilanguage",
alt: "Show Standard",
maxZoom: 20
}));
//End
/*=================================================*/
//OSM BW Layer - On
/*=================================================*/
//Start
map.mapTypes.set("OSMBW", new google.maps.ImageMapType({
getTileUrl: function (coord, zoom) {
return "http://ift.tt/1c7KFb5" + zoom + "/" + coord.x + "/" + coord.y + ".png";
},
tileSize: new google.maps.Size(256, 256),
name: "Black & White",
alt: "Show OSM Map Black & White",
maxZoom: 20
}));
//End
/*=================================================*/
//OSM Public Transport Layer - On
/*=================================================*/
//Start
map.mapTypes.set("PublicTransport", new google.maps.ImageMapType({
getTileUrl: function (coord, zoom) {
return "http://ift.tt/1CUb8BE" + zoom + "/" + coord.x + "/" + coord.y + ".png";
},
tileSize: new google.maps.Size(256, 256),
name: "Public",
alt: "Show Public Transport",
maxZoom: 20
}));
//End
/*=================================================*/
//Skobbler Layer - On
/*=================================================*/
//Start
map.mapTypes.set("Skobbler", new google.maps.ImageMapType({
getTileUrl: function (coord, zoom) {
return "http://ift.tt/1CUb8BG" + zoom + "/" + coord.x + "/" + coord.y + ".png";
},
tileSize: new google.maps.Size(256, 256),
name: "Skobbler",
alt: "Show Skobbler Map",
maxZoom: 20
}));
//End
/*=================================================*/
//MapQuest Layer - On
/*=================================================*/
//Start
map.mapTypes.set("MapQuest", new google.maps.ImageMapType({
getTileUrl: function (coord, zoom) {
return "http://ift.tt/1CUb98L" + zoom + "/" + coord.x + "/" + coord.y + ".png";
},
tileSize: new google.maps.Size(256, 256),
name: "Map Quest",
alt: "Show Map Quest-OSM",
maxZoom: 20
}));
//End
/*=================================================*/
//Open Cycle Map Layer - On
/*=================================================*/
//Start
map.mapTypes.set("OpenCycleMap", new google.maps.ImageMapType({
getTileUrl: function (coord, zoom) {
return "http://ift.tt/1c7KCMr" + zoom + "/" + coord.x + "/" + coord.y + ".png";
},
tileSize: new google.maps.Size(256, 256),
name: "Open Cycle",
alt: "Show Open Cycle Map",
maxZoom: 20
}));
//End
/*=================================================*/
//Open Cycle Map Transport Layer - On
/*=================================================*/
//Start
map.mapTypes.set("OCMTransport-D", new google.maps.ImageMapType({
getTileUrl: function (coord, zoom) {
return "http://ift.tt/1CUb98N" + zoom + "/" + coord.x + "/" + coord.y + ".png";
},
tileSize: new google.maps.Size(256, 256),
name: "Dark",
alt: "Show Open Cycle Transport Map",
maxZoom: 20
}));
//End
/*=================================================*/
//Open Cycle Map Transport Layer - On
/*=================================================*/
//Start
map.mapTypes.set("OCMTransport-L", new google.maps.ImageMapType({
getTileUrl: function (coord, zoom) {
return "http://ift.tt/1c7KFb9" + zoom + "/" + coord.x + "/" + coord.y + ".png";
},
tileSize: new google.maps.Size(256, 256),
name: "Light",
alt: "Show Open Cycle Transport Map",
maxZoom: 20
}));
//End
/*=================================================*/
//Open Cycle Map Transport Layer - On
/*=================================================*/
//Start
map.mapTypes.set("OCMLandscape", new google.maps.ImageMapType({
getTileUrl: function (coord, zoom) {
return "http://ift.tt/1CUb8BK" + zoom + "/" + coord.x + "/" + coord.y + ".png";
},
tileSize: new google.maps.Size(256, 256),
name: "Landscape",
alt: "Show Landscape Map",
maxZoom: 20
}));
//End
/*=================================================*/
//Open Cycle Map Outdoor Layer - On
/*=================================================*/
//Start
map.mapTypes.set("OCMOutdoor", new google.maps.ImageMapType({
getTileUrl: function (coord, zoom) {
return "http://ift.tt/1c7KCMu" + zoom + "/" + coord.x + "/" + coord.y + ".png";
},
tileSize: new google.maps.Size(256, 256),
name: "Outdoor",
alt: "Show Outdoor Map",
maxZoom: 20
}));
//End
/*=================================================*/
marker(map, assets);
map.setTilt(45);
map.setHeading(90);
var assets = []; function marker(map, assets) - This is the function of google marker
// Add markers to the map
// Marker sizes are expressed as a Size of X,Y
// where the origin of the image (0,0) is located
// in the top left of the image.
// Origins, anchor positions and coordinates of the marker
// increase in the X direction to the right and in
// the Y direction down.
var image = {
url: 'img/stop.png',
// This marker is 20 pixels wide by 32 pixels tall.
size: new google.maps.Size(28, 32),
// The origin for this image is 0,0.
origin: new google.maps.Point(0, 0),
// The anchor for this image is the base of the flagpole at 0,32.
//anchor: new google.maps.Point(0, 32)
};
// Shapes define the clickable region of the icon.
// The type defines an HTML <area> element 'poly' which
// traces out a polygon as a series of X,Y points. The final
// coordinate closes the poly by connecting to the first
// coordinate.
var shape = {
coords: [1, 1, 1, 20, 18, 20, 18, 1],
type: 'poly'
};
var url = 'http://ift.tt/19XHiCe';
$.getJSON(url, function (assets) {
for (var i = 0; i < assets.length; i++) {
var asset = assets[i];
var myLatLng = new google.maps.LatLng(asset.PosX, asset.PosY);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
animation: google.maps.Animation.DROP,
icon: image,
shape: shape,
title: asset.Asset,
zIndex: asset.PosZ
});
var assetName = asset.Asset;
var assetAddress = asset.Location;
var assetTag = asset.Tag;
var assetEngine = asset.Engine;
var assetSpeed = asset.Speed;
var assetMileage = asset.Mileage;
var assetFix = asset.Fix;
var assetTimestamp = asset.Timestamp;
var assetContent = "<div id='infobox'><h4 id='firstHeading' class='firstHeading'>" + assetName + "</h4>" + "<p class='text-justify bg-danger pad-all' style='height:auto'>"
+ assetAddress + "</p>" + "<table visibly='vehicle:status' class='table table-bordered table-vcenter'>" + "<tbody>" + "<tr>" + "<td>" + "<span class='text-bold'>" + assetTag + "</span>" + "</td>" + "</tr>" + "<td>" + "<span class='text-bold'>" + assetEngine + "</span>" + "<br />" + "<span class='text-normal'>" + assetSpeed + "</span>" + " </td>" + "</tr>" + "<tr>" + "<td>" + "<span class='text-bold'>Mileage</span>" + "<br />" + "<span class='text-normal'>" + assetMileage + "</span>" + "</td>" + "</tr>" + "<tr>" + "<td>" + "<span class='text-bold'>" + assetFix + "</span>" + "<br />" + " <span class='text-normal'>" + assetTimestamp + "</span>" + "</td>" + "</tr>" + "</tbody>" + "</table>" + "</div>";
//Marker Details - Info Window
/*=================================================*/
//Start
var infoboxOptions = {
//content: document.getElementById("infobox"),
content: assetContent,
disableAutoPan: false,
maxWidth: 150,
pixelOffset: new google.maps.Size(-140, 0),
zIndex: null,
boxStyle: {
background: "url('http://ift.tt/1e1mV5f') no-repeat",
opacity: 0.95,
width: "280px"
},
closeBoxMargin: "12px 4px 2px 2px",
closeBoxURL: "http://ift.tt/1a0VvrG",
infoBoxClearance: new google.maps.Size(1, 1),
isHidden: false,
enableEventPropagation: false
};
//Define the infobox
assets[i].infobox = new InfoBox(infoboxOptions);
//Open box when page is loaded
assets[i].infobox.close(map, marker);
//Add event listen, so infobox for marker is opened when user clicks on it. Notice the return inside the anonymous function - this creates
//a closure, thereby saving the state of the loop variable i for the new marker. If we did not return the value from the inner function,
//the variable i in the anonymous function would always refer to the last i used, i.e., the last infobox. This pattern (or something that
//serves the same purpose) is often needed when setting function callbacks inside a for-loop.
google.maps.event.addListener(marker, 'click',(function(marker, i) {
return function () {
assets[i].infobox.open(map, this);
map.panTo(assets[i].myLatLng);
}
})(marker, i));
}
return assets;
}
//End
/*=================================================*/
google.maps.event.addDomListener(window, 'load', initialize); - End
load-status.js - This is to load the Web API (tables)
$(document).ready(function () {
$('#assetStatus').bootstrapTable(
{
idField: 'id',
url: 'http://ift.tt/19XHiCe',
columns: [{
field: 'Engine',
title: 'Engine',
class: 'col-md-2',
formatter: 'assetColorStatus'
}, {
field: 'Asset',
title: 'Asset'
}, {
field: 'Fix',
title: 'GPS',
class: 'col-md-1',
formatter: 'gpsStatus'
}, {
field: 'Timestamp',
title: 'GPRS',
class: 'col-md-1',
formatter: 'gprsStatus'
}]
});
});
asked 1 min ago
How can I select from html table and it will show the selected item to google maps marker?
Aucun commentaire:
Enregistrer un commentaire