Web Technology Experts Notes

Thursday, 7 August 2014

Goole Map - Track your moving Position on google map- html5

This will enable to you get the current position of your location in mobile. First it will tell your current position on the Google map in form of Pushpin. When you start changing your position then pushpin will start moving. It will be follow you. But GPS and internet must be support by your mobile and off-course it should be enabled in your mobile. It will also work in 2G/3G/4G. It will give your more accurate when you are in City area.

How its work:
It will check your current position with use of browser html5 property. Thats why it ask "Are you want to share your current location".To see your position you must give the access of your current position to the browser. After getting your position it simply plot on google map. When you change your position it recheck the position with use of GPS and update the pushpin on google map.

Initializing...

<style>
    body {font-family: Helvetica;font-size:13pt;padding:0px;margin:0px}
    #map_canvas{display:none; height:100%; width:100%; position:relative;z-index:1;}
    #current {padding:5px; background-color:#000; position:unset; left:0px;z-index:2;text-align:center;width:90%;opacity:0.4;color:#FFF;border-radius:0px 0px 5px 5px; font-weight:bold;}
    #btnCont{position:absolute; bottom:0px; left:0px; width:100%; text-align:center;z-index:2;}</style>


<div id="current">
Initializing...</div>
<div id="map_canvas" style="height: 300px; width: 800px;">
</div>
<div id="btnCont" style="display: none;">
<button onclick="startAgain();"> Restart Tracking</button>
    <button onclick="stopTracking();"> Stop Tracking</button>
</div>
<script charset="utf-8" src="//mapduck.com/js/geoPosition.js" type="text/javascript"></script>
<script src="//maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>


<script>
    var gmap = null;
    var markers = [];
    var opts = {
        enableHighAccuracy: true,
        timeout: 60000,
        maximumAge: 0
    };
            
    function initialiseMap(){
        var myOptions = {
            minZoom : 3,
            zoom: 10,
            mapTypeControl: true,
            mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
            navigationControl: true,
            navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
            mapTypeId: google.maps.MapTypeId.ROADMAP      
        } 
        gmap = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    }
      
    function initialise(){
        if(geoPosition.init())
        {
            document.getElementById('current').innerHTML="Receiving...";
            geoPosition.getCurrentPosition(showPosition,handle_errors,opts);
        }
        else
        {
            document.getElementById('current').innerHTML="Functionality not available";
        }
    }
            
    function handle_errors(error){
        var error_str='';
        switch(error.code)
        {
            case error.PERMISSION_DENIED: 
                error_str="User(you) did not share your geolocation";
                break;
 
            case error.POSITION_UNAVAILABLE: 
                error_str="Could not detect current position";
                break;
 
            case error.TIMEOUT: 
                error_str="retrieving position timed out";
                break;
 
            default: 
                error_str="unknown error";
                break;
        }
        document.getElementById('current').innerHTML=error_str;
    }
   
    function showPosition(p){
        if(gmap == null){
            document.getElementById('map_canvas').style.display = 'block';
            initialiseMap();
        }
        var latitude = parseFloat( p.coords.latitude );
        var longitude = parseFloat( p.coords.longitude );
        document.getElementById('current').innerHTML="Lat = " + latitude.toFixed(2) +" and Long = " + longitude.toFixed(2);
        var location = new google.maps.LatLng( latitude , longitude);
        gmap.setCenter(location);

        var marker = new google.maps.Marker({
            position: location,
            map: gmap,
            title:"You are here"
        });
        markers.push(marker);
    
        var infowindow = new google.maps.InfoWindow({
            content: "<strong>This is your current location.</strong>"
        });
    
        google.maps.event.addListener(marker, 'click', function() {
            infowindow.open(gmap,marker);
        });
        document.getElementById('btnCont').style.display = 'block';
    }
   
    function setAllMap(map) {
        for (var i = 0; i &lt; markers.length; i++) {
            markers[i].setMap(map);
        }
    }
    
    function deleteMarkers() {
        setAllMap(null);
        markers = [];
    }
            
    var watchID = navigator.geolocation.watchPosition(trace,handle_errors,opts);
   
    function trace(position){
        geoPosition.getCurrentPosition(position);
        deleteMarkers();
        showPosition(position);
    }
   
    function startAgain(){
        navigator.geolocation.clearWatch(watchID);
        watchID = navigator.geolocation.watchPosition(trace,handle_errors,opts);
    }   
   
    function stopTracking(){
        navigator.geolocation.clearWatch(watchID);
    }
    google.maps.event.addDomListener(window, 'load', initialise);

</script>

PayPal Adaptive Payments - Chain Payment and Parallel Payment

Paypal Adaptive Payments is feature of Paypal Pro means you must have Paypal pro account for use this payment method. In this customer can pay with Credit Card/Debit Card/Paypal.com account. While paying with Credit card/Debit card he can also create a account in paypal.com. Adaptive payments handles payments between a sender and one or more receivers.

There are two types of payments
1. Adaptive Parallel Payment
In this method, customer will pay to two or more vendor at the time. Also customer will be aware of the vendors with what amount they are getting.

For Example: Customer buy one product and pay $10 to each vendor, He will see two vendor name in Paypal.com as well as two orders in payment history.

Setup of Parallel Payment
https://developer.paypal.com/docs/classic/adaptive-payments/ht_ap-parallelPayment-curl-etc/

2. Adaptive Chain Payment
In this payment, Customer will see only one vendor name (Primary), He will be totally unaware of other beneficiary. In this case, First all amount will be transfer to primary vendor. then from the primary vendor amount will be deducted and transferred to other beneficiary.

For Example: In Primary Vendor Payment history there will be n+1 records where n is number of vendor except self. It means if there is total 3 vendor (1 Primary + 2 Secondary), He will get 3 order (1. full payment, 2. Second vendor transfer money, 3. third vendor transfer money). You can set only one primary vendor who will get the money directly from customer other will be secondary get the money from primary vendor and primary vendor can't stop to giving money.

Vendor don't have paypal Account: If vendor don't have paypal account. Paypal will send an email to vendor, then vendor can register with that email and get his payment.

Adaptive payments Add shipping address
https://developer.paypal.com/docs/classic/api/adaptive-payments/SetPaymentOptions_API_Operation/

Example By Snapshots: