PHP Guru: 2013

Wednesday, September 4, 2013

Google Maps InfoWindow for Markers Vs Polygon Drawings

Marker :

var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
  var mapOptions = {
    zoom: 4,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }

 var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

var contentString = 'Marker InfoWindow in Google Map';

var infowindow = new google.maps.InfoWindow({
      content: contentString
  });

  var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title: 'Uluru (Ayers Rock)'
  });
  google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map,marker); // This is the Important point
  });

Polygon Drawing:

statePolygon.wPet = "Polygon InfoWindow in Google Map";
statePolygon.infoWindow = new google.maps.InfoWindow();

google.maps.event.addListener(statePolygon,"mouseover",function(event){
    this.setOptions({fillColor: "#00FF00"});
    this.infoWindow.setContent(this.wPet);
    this.infoWindow.open(map); // This is the Important point

this.infoWindow.setPosition(event.latLng);
});

Monday, August 19, 2013

Google Map with Custom Image Marker

Inside Header:
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>

Inside Body:
<div id="map3" style="width:100%; float:left; text-align:center; margin:auto; height: 300px; border: 1px solid #D6D6D6; overflow: hidden;"></div>

<script type="text/javascript">
var locations =[['My title^Title : My title^Location : Chennai, Tamil Nadu, India',13.0000,80.0000,1]];

    var map = new google.maps.Map(document.getElementById('map3'), {
      zoom: 12,
     center: new google.maps.LatLng(13.0000,80.0000),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var infowindow = new google.maps.InfoWindow();

    var infowindow1 = new google.maps.InfoWindow();

    var marker, i;
    var image = 'images/cjflag.png';
    for (i = 0; i < locations.length; i++) {
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map,
        icon: image
      });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {

            var c1=locations[i][0];
    var n1=c1.split("^");
    var title1=n1[0]; var owner1=n1[1]; var est1=n1[2]; var biddate1=n1[3]; var plan1=n1[4];
    var content1 = '<div class="map-content" style="color:#253C87; font-size:12px;"><a href=""><b>' + title1 + '</b></a><br />' + owner1 + '<br />' + est1 + '<br /></div>';
          infowindow.setContent(content1);
          infowindow.open(map, marker);
        }
      })(marker, i));
}
</script>

Adding Controls to the Google Map

function initialize() {
  var mapOptions = {
    zoom: 4,
    center: new google.maps.LatLng(-33, 151),


    panControl: true,
    zoomControl: true,
    mapTypeControl: false,
    scaleControl: false,
    streetViewControl: true,
    overviewMapControl: false


    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(document.getElementById("map-canvas"),
        mapOptions);
}

How To Refresh Greybox Parent Page

Step 1: Download Greybox here and place it inside you js/ directory.

Step 2: Create your index.php file, with these codes inside:

<html>
     <head>
          <title>How To Refresh Greybox Parent Page</title>

          <script type="text/javascript">
               var GB_ROOT_DIR = "js/greybox/";
          </script>
          
          <script src="js/greybox/AJS.js" type="text/javascript">
          </script>
          <script src="js/greybox/AJS_fx.js" type="text/javascript">
          </script>
          <script src="js/greybox/gb_scripts.js" type="text/javascript">
          </script>
          <link href="js/greybox/gb_styles.css" rel="stylesheet" type="text/css">       

          <script language="javascript" type="text/javascript">
               // we will use greybox' afterclose function to reload the parent page
               // after closing the grebox pop up window
             <!--
                    function afterclose() {
                         window.location.reload();
                    }        
               // -->
          </script>

     </head>
<body>

     <b>This is the greybox parent window</b>
     <p>
          <a href="greybox_pop_up.php" title="Greybox pop up" rel="gb_page_center[500, 500]">
               Click this link to greybox pop up
          </a>
     </p>

     Textbox with default input: 
     <input name="sample_textbox" size="40" type="text" value="some predefined value" />

</body>
</html>

Step 3: Create your greybox pop up page which is greybox_pop_up.php with these codes inside:

<html>
     <head>
          <title>This is the greybox pop up</title>
          <script type='text/javascript'>
          function redirect_to_parent(){
               parent.parent.window.location = "index.php";
               parent.parent.GB_hide();
          }
          </script>
     </head>
<body onunload="redirect_to_parent();"> <-- The important part -->


     <h2>This is the greybox pop up window</h2>
     <form>
          <input type="button" value="Close This Window" onclick="parent.parent.GB_hide();"> 
     </form>


</body>
</html>

Step 4: You should have this files by now:

Final files in this tutorial

Step 5: Testing

If you're gonna run index.php, you should see this in your browser:

Our index.php file

Change the predefined textbox value to any values you want, like the following:

Textbox with changed predefined value

Click the link to show the greybox pop up

Greybox pop up window

Close the pop up window, if the textbox value returned to "some predefined value", it means that the parent page was refreshed.

Share your website in Facebook

Method 1 :

<a href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fparse.com" target="_blank">
  Share on Facebook
</a>

Method 2 :

<a href="#" 
  onclick="
    window.open(
      'https://www.facebook.com/sharer/sharer.php?u='+encodeURIComponent(location.href), 
      'facebook-share-dialog', 
      'width=626,height=436'); 
    return false;">
  Share on Facebook
</a>

jQuery set cookie for first visit

<script type="text/javascript">
    $(document).ready(function() {
        // check cookie
        var visited = $.cookie("visited")

        if (visited == null) {
            $('.newsletter_layer').show();
            $.cookie('visited', 'yes'); 
            alert($.cookie("visited"));         
        }

        // set cookie
        $.cookie('visited', 'yes', { expires: 1, path: '/' });
    });
</script>

How to set a div to auto adjust it's height with available browser height

HTML:

<div id="resize">
  <p>content</p><p>content</p><p>content</p><p>content</p>
</div>

CSS:

#resize {
background: #f00;
color: white;
position: absolute;
top: 100px;
left: 200px;
right: 200px;
bottom: 100px;
overflow: auto;
}

p {line-height: 3; margin: 0;}

Working Example : Here

PHP – CURL – JSON

PHP – It is a web development language used on server side. PHP stands for Hypertext Preprocessor.

CURL – what it stands for according to me is Capture URL It is one of the methods in php to reterive contents from remote websites on the backend itself.

JSON – Javascript Object Notation, It is one of the what i would say is STRUCTURED data transfer between client side as well as from server.

You must have heard about graph api of facebook. What it do is it provides the required data in json.

I have been studying about interaction between various languages. What all can we use to share data from one language to another because an application cannot completely made in one language. Few of which i studied are XML, JSON etc.

I would tell about using XML later. For Today I am going to explain in short how to create and read JSON in PHP in javascript.

JSON in PHP

To create a JSON in php there is very simple function json_encode(hash)

hash is a kind of associative array in which you can access elements not only by index but also by name like $a['id']
since JSON is properly structured, there fore data to be passed in proper format
and each of the hash must have title, no title can result in error.

Sample PHP program to conver associative array in JSON

<?php

$a = array(

'Name' => 'Ashutosh Agrawal' ,

'Branch ' => 'Software Engineering' ,

'Subjects' => array(

'Sub1'=>'Software Design',

'Sub2'=>'Software Arch'

)

);

echo json_encode($a);

will output following json

{

"Name":"Ashutosh Agrawal",

"Branch ":"Software Engineering",

"Subjects":

{

"Sub1":"Software Design",

"Sub2":"Software Arch"

}

To Convert JSON back to Associative array use json_decode($json)
pass a valid json to the function and it would return the associative array for the json.

Now there comes a point that how are you going to get the json. well over here comes curl in the game. it is going to help you to get the JSON from remote sites. Not only json but also anycontent.

so how to use it…

first let me introduce some of the functions in curl which you require to access the json from a remote site.

$ch = curl_init() : this function intializes a curl session and returns the object to that session
curl_setopt($ch , $optionname , $optionvalue) : this function is used to set various options in curl session such as

CURLOPT_HTTPHEADER : Header of request
CURLOPT_RETURNTRANSFER : Whether to return the json received to the script or just display it on the page.
CURLOPT_URL : This option is used to set the remote fetch URL for CURL.
There are many other CURL options available You can check here

curl_exec($ch) : this would execute thCURL_RETURNTRANSFER is set to true, it will return the curl data else it would display and return 1.

Following Sample Program would fetch a json and display it as associative array

<?php

$json_url = "localhost/thepro/abc.json";

$ch = curl_init();

curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

curl_setopt($ch, CURLOPT_HTTPHEADER, array('Content-Type: application/json'));

curl_setopt($ch, CURLOPT_URL, $json_url);

$str = curl_exec($ch);

$ar = json_decode($str,true);

echo $ar['Subjects']['Sub1'];

PHP – It is a web development language used on server side. PHP stands for Hypertext Preprocessor.
CURL – what it stands for according to me is Capture URL It is one of the methods in php to reterive contents from remote websites on the backend itself.
JSON – Javascript Object Notation, It is one of the what i would say is STRUCTURED data transfer between client side as well as from server.
You must have heard about graph api of facebook. What it do is it provides the required data in json.
I have been studying about interaction between various languages. What all can we use to share data from one language to another because an application cannot completely made in one language. Few of which i studied are XML, JSON etc.
I would tell about using XML later. For Today I am going to explain in short how to create and read JSON in PHP in javascript.

JSON in PHP

To create a JSON in php there is very simple function json_encode(hash)

hash is a kind of associative array in which you can access elements not only by index but also by name like $a['id']
since JSON is properly structured, there fore data to be passed in proper format
and each of the hash must have title, no title can result in error.

Sample PHP program to conver associative array in JSON

<?php

 $a = array(

'Name' => 'Ashutosh Agrawal' ,

'Branch ' => 'Software Engineering' ,

'Subjects' => array(

'Sub1'=>'Software Design',

'Sub2'=>'Software Arch'

)

);

 echo json_encode($a);

?>

will output following json

{

"Name":"Ashutosh Agrawal",

"Branch ":"Software Engineering",

"Subjects":

    {

    "Sub1":"Software Design",

    "Sub2":"Software Arch"

    }

}

To Convert JSON back to Associative array use json_decode($json)
pass a valid json to the function and it would return the associative array for the json.
Now there comes a point that how are you going to get the json. well over here comes curl in the game. it is going to help you to get the JSON from remote sites. Not only json but also anycontent.
so how to use it…
first let me introduce some of the functions in curl which you require to access the json from a remote site.

$ch = curl_init() : this function intializes a curl session and returns the object to that session
curl_setopt($ch , $optionname , $optionvalue) : this function is used to set various options in curl session such as

CURLOPT_HTTPHEADER : Header of request
CURLOPT_RETURNTRANSFER : Whether to return the json received to the script or just display it on the page.
CURLOPT_URL : This option is used to set the remote fetch URL for CURL.
There are many other CURL options available You can check here

curl_exec($ch) : this would execute thCURL_RETURNTRANSFER is set to true, it will return the curl data else it would display and return 1.

Following Sample Program would fetch a json and display it as associative array

<?php

$json_url = "localhost/thepro/abc.json";

 $ch = curl_init();

 curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

 curl_setopt($ch, CURLOPT_HTTPHEADER, array('Content-Type: application/json'));

 curl_setopt($ch, CURLOPT_URL, $json_url);

 $str = curl_exec($ch);

 $ar = json_decode($str,true);

 echo $ar['Subjects']['Sub1'];

?>

I
- See more at: http://theprogrammer.in/blog/2012/04/php-curl-json/#sthash.6mWOCIno.dpuf

PHP – CURL – JSON