Showing posts with label javascrpit. Show all posts
Showing posts with label javascrpit. Show all posts

Jun 27, 2014

google maps javascript api v3 using j-query



This post similar my post GEOLOCATION for Google Maps JavaScript V3

But this map using j-query.

First, prepare.

You will download library.

And unzip and copy  ui folder to you project.


Second, coding.

This is javascript for library.

  1. <!--jquery-ui-map-->
  2. <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
  3. <script type="text/javascript" src="ui/min/jquery.ui.map.full.min.js"></script>
  4. <script type="text/javascript" src="ui/jquery.ui.map.extensions.js"></script>

This is body

  1. <body>
  2.     <div data-role="page" id="page" data-fullscreen="true" class="map_style">
  3.     <div data-role="header" data-position="fixed">
  4.         <h1>map page</h1>
  5.     </div>
  6.     <div data-role="content" class="map_style">
  7.         <div id="map_canvas" class="map_style" >
  8.             </div> 
  9.     </div>
  10.     <div data-role="footer" data-position="fixed">
  11.         <div data-role="navbar">
  12.            <ul>
  13.            <li><a href="#" data-icon="search" id="currentpos">current location</a></li>
  14.            </ul>
  15.         </div>
  16.     </div>
  17.     </div>
  18. </body>

Add map_style class to page(line 2), content(line 6), map(line 7)

'Line 7' is map and 'line 13' is search button.

This is very important code.

This code Implement google map.

  1. <script type="text/javascript">
  2.     $(document).ready(function(e) {
  3.         var startpos=new google.maps.LatLng(37.309,126.875);
  4.         $("#map_canvas").gmap({
  5.             "center":startpos,
  6.         "zoom":16
  7.         });
  8.         $("#currentpos").click(function() {
  9.             $("#map_canvas").gmap("getCurrentPosition",function(position,status){
  10.             if(status=="OK"){
  11.                 var latlng=new google.maps.LatLng(
  12.                 position.coords.latitude,position.coords.longitude);
  13.                 var marker="http://www.google.com/intl/en_us/mapfiles/ms/icons/blue-dot.png";
  14.                 $("#map_canvas").gmap("get","map").panTo(latlng);
  15.                     $("#map_canvas").gmap("addMarker",{
  16.                     "position":latlng,
  17.                     "icon":marker
  18.                     }).click(function(){
  19.                         $("#map_canvas").gmap("openInfoWindow",{
  20.                         "content":"<b>current location</b> <img src='http://images.forbes.com/media/lists/companies/google_200x200.jpg' alt=''/>"},this);
  21.                         });
  22.             }else{
  23.                 alert("can't found location");
  24.             }
  25.         });
  26.     });
  27.     });//ready   
  28.    
  29. </script>
Look so complex but simple.

'Line 3' is init position for display map.

'Line 4~7' is display(position and zoom level)

'Line 8~26' is searching code.

'Line 8' is button click listener.

'Line 9' is check current position using sensor(gps or network)

I recommend using mobile.

'Line 10~21' is success searching your position and 'line 22~24' is can't searching.

'Line 11~12' is getting current position.

'Line 13' is marker option.

'Line 14~17' display current position and marker.

'Line 18' is click listener for marker.

'Line 19~21' is info window.

I ran my mobile device.

This is result.

This is init status.

I click to search button.

I click to marker.


작성자: 시간: No comments:
라벨: , , ,

Jun 25, 2014

Image size changing in HTML




1. Using Style.

This is Style code

  1. <style>
  2.     img{
  3.         width:30%;
  4.     }
  5.     img:hover{
  6.         transition-property:width;
  7.         transition-duration:1s;
  8.         width:50%;
  9.     }
  10. </style>
" img{} "means img's init status.

" img:hover{} " means mouse pointer's on the img.

"transition-property" means event property. so width is change.

"transition-duration" means event time.



This is initial status. 

This is mouse hover status.


2. Using JavaScrpit & class

You need a JavaScript code

  1. <script type="text/javascript">
  2.     $(document).ready(function() {
  3.         $("#pic").click(function(){
  4.             if($(this).hasClass("small")){
  5.                 $("#pic").addClass("large") ;
  6.                 $("#pic").removeClass("small") ;
  7.                
  8.             }
  9.             else{
  10.                 $("#pic").addClass("small") ;
  11.                 $("#pic").removeClass("large") ;               
  12.             }
  13.         });
  14.     });
  15. </script>
"$("id").click " similar click listener.

"$(this).hasClass("class")" check class. If it has a class that return true. else false.

So. If #pic has a small class, add large class and remove small class.

This is style code

  1. <style>
  2.     #pic{
  3.         -webkit-transition-property:width;
  4.         -webkit-transition-duration:1s;
  5.     }
  6.     .small{
  7.         width: 30%;
  8.     }
  9.     .large{
  10.         width:50%;
  11.     }
  12.    
  13. </style>
small class size is 30% and large class size is 50%

This is image code
  1. <img class="small" id="pic"src="http://images.forbes.com/media/lists/companies/google_200x200.jpg"/>
image infomation.



This is before click

This is after click.

작성자: 시간: No comments:
라벨: , ,
Subscribe to: Posts (Atom)