Monday, April 28, 2014

Google map.. Get straight path between two markers

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="" dir="ltr">
<head lang="" dir="ltr">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false&amp;libraries=geometry"></script>
<script>
function initialize() {
        if(jQuery('#address1').val()!=''){
            var position = jQuery('#address1').val().split(",");
            var g_lat1= parseFloat(position[0]);
            var g_long1=parseFloat(position[1]);
        }
        var mapOptions = {
            zoom: 4,
            center: new google.maps.LatLng(g_lat1,g_long1),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById('map-canvas'),
        mapOptions);
        map.controls[google.maps.ControlPosition.TOP_CENTER].push(
        document.getElementById('info'));
        if(jQuery('#address1').val()!=''){
            var position = jQuery('#address1').val().split(",");
            var lat1= parseFloat(position[0]);
            var long1=parseFloat(position[1]);
            marker1 = new google.maps.Marker({
                map: map,
                draggable: false,
                position: new google.maps.LatLng(lat1.toFixed(2),long1.toFixed(2))
            });
        }else{
            marker1 = new google.maps.Marker({
                map: map,
                draggable: false,
                position: new google.maps.LatLng(geoip_latitude(),geoip_longitude())
            });
        }
        if(jQuery('#address1').val()!=''){
            var iw = new google.maps.InfoWindow({
                content: '<div style="overflow:hidden">'+jQuery('#content1').val()+'</div>'
            });
        }else{
            var iw = new google.maps.InfoWindow({
                content: '<div style="overflow:hidden">'+geoip_city()+','+geoip_region_name()+','+geoip_country_name()+'</div>'
            });
        }
        google.maps.event.addListener(marker1, "click", function (e) { iw.open(map, this); });
        if(jQuery('#address2').val()!=''){
            var position1 = jQuery('#address2').val().split(",");
            var lat2= parseFloat(position1[0]);
            var long2= parseFloat(position1[1]);
            marker2 = new google.maps.Marker({
                map: map,
                draggable: false,
                position: new google.maps.LatLng(lat2.toFixed(2),long2.toFixed(2))
            });
        }else{
            marker2='';
        }
        var iw1 = new google.maps.InfoWindow({
            content: '<div style="overflow:hidden">'+jQuery('#content2').val()+'</div>'
        });
        google.maps.event.addListener(marker2, "click", function (e) { iw1.open(map, this); });
        var bounds = new google.maps.LatLngBounds(marker1.getPosition(),
        marker2.getPosition());
        map.fitBounds(bounds);
        zoomChangeBoundsListener =
            google.maps.event.addListenerOnce(map, 'bounds_changed', function(event) {
            if (this.getZoom()){
                this.setZoom(4);
                var LatLngList = [new google.maps.LatLng (lat1,long1), new google.maps.LatLng  (lat2,long2)];
                var bounds = new google.maps.LatLngBounds ();
                for (var i = 0, LtLgLen = LatLngList.length; i < LtLgLen; i++) {
                    bounds.extend (LatLngList[i]);
                }
                map.fitBounds (bounds);
            }
        });
        setTimeout(function(){google.maps.event.removeListener(zoomChangeBoundsListener)}, 1000);
        var geodesicOptions = {
            strokeColor: '#CC0099',
            strokeOpacity: 1.0,
            strokeWeight: 3,
            geodesic: true,
            map: map
        };
var lineSymbol = {
path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
strokeOpacity: 1,
scale: 2
 };
        geodesicPoly = new google.maps.Polyline({
strokeOpacity: 0,
icons: [{
 icon: lineSymbol,
 offset: '0',
 repeat: '20px'
}],
map: map
});
        update();

    }
    function update() {
        var path = [marker1.getPosition(), marker2.getPosition()];
        geodesicPoly.setPath(path);
        var heading = google.maps.geometry.spherical.computeHeading(path[0],
        path[1]);
    }
    google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas" style="width:600px;height:600px;"></div>
<input type="hidden" id="address1" value="23.070611,72.621646">
<input type="hidden" id="address2" value="1.3644202,103.99153079999996">
<input type="hidden" id="content1" value="Ahmedabad, India (AMD)">
<input type="hidden" id="content2" value="Changi Airport Singapore (SIN), Airport Boulevard, Singapore">
</body>
</html>

Saturday, April 19, 2014

Facebook share functionality

<html>
<head>
<script src="http://connect.facebook.net/en_US/all.js" type="text/javascript"></script>
<script type="text/javascript">
window.fbAsyncInit = function()
{
    FB.init({
        appId  : '420388744727086',
        status : true, // check login status
        cookie : true, // enable cookies to allow the server to access the session
        xfbml  : true , // parse XFBML
        oauth : true // Enable oauth authentication
    });


};

function post_on_wall()
{
    FB.login(function(response)
    {
        if (response.authResponse)
        {
            var opts = {
                message : "Hello",
                name : 'Post Title',
                link : 'www.postlink.com',
                description : 'post description',
                picture : 'http://2.gravatar.com/avatar/8a13ef9d2ad87de23c6962b216f8e9f4?s=128&amp;d=mm&amp;r=G'
            };

            FB.api('/me/feed', 'post', opts, function(response)
            {
                if (!response || response.error)
                {
                    alert('Posting error occured');
                }
                else
                {
                    alert('Success - Post ID: ' + response.id);
                }
            });
        }
        else
        {
            alert('Not logged in');
        }
    }, { scope : 'publish_stream' });
}
</script>
<div id="fb_div">
    <h3>Post to your Facebook wall:</h3> <br />
    <input type="button" value="Post on Wall" onClick="post_on_wall();" />
</div>
<div id="fb-root"></div>
</html>

Friday, April 18, 2014

Display image after selecting image using jquery

<!DOCTYPE html>

<html>

<head>

<link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />

<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>

<meta charset=utf-8 />

<title>JS Bin</title>

<!--[if IE]>

 <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->

<style>

 article, aside, figure, footer, header, hgroup, 

 menu, nav, section { display: block; }

</style>

<script>

function readURL(input) {

if (input.files && input.files[0]) {

var reader = new FileReader();


reader.onload = function (e) {

$('#blah')

.attr('src', e.target.result)

.width(150)

.height(200);

};


reader.readAsDataURL(input.files[0]);

}

}

</script>

</head>

<body>

 <input type='file' onchange="readURL(this);" />

<img id="blah" src="#" alt="your image" />

</body>

</html>