tutorial101 is the one place for high quality web development, Web Design and software development tutorials and Resources programming. Learn cutting edge techniques in web development, design and software development, download source components and participate in the community.
article
Showing posts with label web-development (JavaScript). Show all posts
Showing posts with label web-development (JavaScript). Show all posts
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiple Markers with Info Windows to Google Maps</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style type="text/css">
#mapCanvas {
width: 100%;
height: 450px;
}
body {font-family: "Times New Roman", Times, serif;}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-12">
<p><h3>Multiple Markers with Info Windows to Google Maps</h3></p>
<div id="mapContainer">
<div id="mapCanvas"></div>
</div>
</div>
</div>
</div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCdGv5cjpA0dMUCSolCf89tl_vgccGvsu0"></script>
<script>
function initMap() {
var map;
var bounds = new google.maps.LatLngBounds();
var mapOptions = {
mapTypeId: 'roadmap'
};
// Display a map on the web page
map = new google.maps.Map(document.getElementById("mapCanvas"), mapOptions);
map.setTilt(50);
// Multiple markers location, latitude, and longitude
var markers = [
['Olongapo City, Zambales', 14.841344, 120.282224],
['Subic Bay, Zambales', 14.786400, 120.281535],
['Angeles City, Pampanga', 15.145334, 120.585616],
['Clark Freeportzone, Pampanga', 15.185247, 120.539395]
];
// Info window content
var infoWindowContent = [
['<div class="info_content">' +
'<h3>Olongapo City, Philippines</h3>' +
'<p>Olongapo City Zambales Philippines</p>' + '</div>'],
['<div class="info_content">' +
'<h3>Subic Bay, Philippines</h3>' +
'<p>Subic Bay Olongapo City Zambales Philippines</p>' +
'</div>'],
['<div class="info_content">' +
'<h3>Angeles City, Pampanga</h3>' +
'<p>Angeles City, Pampanga Philippines</p>' +
'</div>'],
['<div class="info_content">' +
'<h3>Clark Freeportzone, Pampanga</h3>' +
'<p>Clark Freeportzone, Pampanga Philippines</p>' +
'</div>']
];
// Add multiple markers to map
var infoWindow = new google.maps.InfoWindow(), marker, i;
// Place each marker on the map
for( i = 0; i < markers.length; i++ ) {
var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
bounds.extend(position);
marker = new google.maps.Marker({
position: position,
map: map,
title: markers[i][0]
});
// Add info window to marker
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infoWindow.setContent(infoWindowContent[i][0]);
infoWindow.open(map, marker);
}
})(marker, i));
// Center the map to fit all markers on the screen
map.fitBounds(bounds);
}
// Set zoom level
var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
this.setZoom(9);
google.maps.event.removeListener(boundsListener);
});
}
// Load initialize function
google.maps.event.addDomListener(window, 'load', initMap);
</script>
</body>
</html>
Google Map with marker and info window using JavaScript
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google Map with marker and info window using JavaScript</title>
</head>
<style>
html, body, #map-canvas {
height: 600px;
margin: 0px;
padding: 0px;
margin-top:20px;
}
</style>
<body>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script type="text/javascript">
function initialize() {
/****** Change latitude and longitude here ******/
var myLatlng = new google.maps.LatLng(14.831634, 120.281559);
/****** Map Options *******/
var mapOptions = {
zoom: 14,
center: myLatlng
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
/****** Info Window Contents *******/
var contentString = '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h1 id="firstHeading" class="firstHeading">Olongapo City</h1>'+
'<div id="bodyContent">'+ '<div style="float:left; width:20%;"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/50/OlongapoCityjf9265_13.JPG/250px-OlongapoCityjf9265_13.JPG" width="120" height="80"/></div>' +
'<div style="float:right; width:80%;margin-top: -6px;"><p>Olongapo, officially the City of Olongapo (Ilocano: Ciudad ti Olongapo; Sambali: Syodad nin Olongapo; Filipino: Lungsod ng Olongapo) and often referred to as Olongapo City, is a highly urbanized city in the Philippines. Located in the province of Zambales but governed independently from the province, it has a population of 233,040 people according to the 2015 census.[4] Along with the town/municipality of Subic (and later, Castillejos as well as the municipalities of Dinalupihan, Hermosa and Morong in Bataan), it comprises Metro Olongapo, one of the twelve metropolitan areas in the Philippines.'+
'https://en.wikipedia.org/wiki/Olongapo</a> '+
'.</p></div>'+
'</div>'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
/****** Map Marker Options *******/
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Olongapo City (Philippines)'
});
/****** Info Window With Click *******/
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
/****** Info Window Without Click *******/
infowindow.open(map,marker);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div class="row">
<div class="col-lg-12">
<div >
<div id="map-canvas"></div>
</div>
</div>
</div>
</body>
How to disable back button in browser using javascript
Below JavaScript code needs to be placed in the head section of the page where you don’t want the user to revisit using the back button:
<script>
function preventBack(){window.history.forward();}
setTimeout("preventBack()", 0);
window.onunload=function(){null};
</script>
full URL path in JavaScript:
var newURL = window.location.protocol + "//" + window.location.host + "/" + window.location.pathname;
breath up the pathname, for example a URL like http://tutorial101.blogspot.com/example/currenturl, you can split the string on "/" characters
<script>
var pathArray = window.location.pathname.split( '/' );
var secondLevelLocation = pathArray[2]; //access the different parts by the parts of the array
alert(secondLevelLocation); //results = currenturl
</script>
<script>
function confirmDelete()
{
return confirm("Are you sure you wish to delete this entry?");
}
</script>
<a href="?action=delete&id=3" onclick="return confirmDelete();"> Delete this entry</a>
<div id="someid"></div>
<script type="text/javascript">
//day/month/year
t1="02/06/2013";
t2="01/07/2013";
//Total time for one day
var one_day=1000*60*60*24;
//Here we need to split the inputed dates to convert them into standard format
var x=t1.split("/");
var y=t2.split("/");
//date format(Fullyear,month,date)
var date1=new Date(x[2],(x[1]-1),x[0]);
var date2=new Date(y[2],(y[1]-1),y[0])
var month1=x[1]-1;
var month2=y[1]-1;
//Calculate difference between the two dates, and convert to days
var Diff_result=Math.ceil((date2.getTime()-date1.getTime())/(one_day)); //results 29=Days
var somediv = document.getElementById('someid');
somediv.innerHTML = Diff_result + "=Days";
</script>
