PHP Developer Solution: September 2012

Tuesday, 18 September 2012

Print A Div using Javascript

<html>
<head>
<script type="text/javascript">
function PrintContentDiv() {
var divPrint = document.getElementById('divContent');
var popupWin = window.open('', '_blank', 'width=300,height=300');
popupWin.document.open();
popupWin.document.write('<html><body onload="window.print()">' + divPrint.innerHTML + '</html>');
popupWin.document.close();
}
</script>
</head>
<body >

<div id="divContent" >
<div style="width:300px;height:500px;">
<strong> Div Print on anchor click </strong>
</div>
</div>
<div>
<a href="javascript:void(0)" onclick="PrintContentDiv();"><img src="images/print-icon.png" /><br />Print<br />Item</a>
</div>
</body>
</html>

Monday, 17 September 2012

Get Google Map using latitude and longitude

This is a very simple way to integrate Google map using latitude and longitude in a div. Just copy+paste the code and set the lat/long according to your location or set it dynamically from database by passing lat/long parameter.

<html>
<head>
<style type="text/css">
div#map {
position: relative;
}

div#crosshair {
position: absolute;
top: 192px;
height: 19px;
width: 19px;
left: 50%;
margin-left: -8px;
display: block;
background: url(crosshair.gif);
background-position: center center;
background-repeat: no-repeat;
}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map;
var geocoder;
var centerChangedLast;
var reverseGeocodedLast;
var currentReverseGeocodeResponse;

function initialize() {
var latlng = new google.maps.LatLng(18.524220910029783,73.85761860000002);
var myOptions = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
geocoder = new google.maps.Geocoder();

var marker = new google.maps.Marker({
position: latlng,
map: map,
title: "Hello World!"
});

}

</script>
</head>
<body onload="initialize()">
<div id="map" style="width:200px; height:200px">
<div id="map_canvas" style="width:100%; height:200px"></div>
<div id="crosshair"></div>
</div>

</body>
</html>