Just another WordPress.com site

Archive for the ‘javascript’ Category

Google Map V3 – Get Langitude and Latitude on mouseover

  • First an object representing google map properties is created with zoom level, map center and map type.
  • Then a map object is created. It takes two parameters. One is the div where the map should be displayed and the other is the object which contains various properties to initialize the google map.
  • With the above to lies the map can be displayed.
  • Next are the two event handlers which will display the lattitude and longitude when the move is moved over the google map or when the mouse is clicked on the map.
  • The event listener needs three parameters first is the map object, next is the event like onmousemove or onclick and the third parameter is the callback function to which the coordinates are passed as a parameter.
  • Each time the event handlers (callback functions) are called i am updating the lattitude and longitude.

That is all folks. Enjoy.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>Get Lattitude and Longitude onmouseover and onclick in Google Map v3 – Get lat lng on click google map version 3 – Programming – Google Maps</title>
<meta name=”keywords” content=”get lattitude longitude, latlng onclick google map, latlng onmousemove google map, get lattitude longitude onclick, google map mouse event, show lattitude longutude onmousemove, show latlng onclick”>
<meta name=”description” content=”Get lattitude and longitude when onmouseover and onmouseclick in google map version 3. Get lat lng onclick and onmouseover on google map version 3.” />
<script type=”text/javascript” src=”http://maps.google.com/maps/api/js?sensor=false”></script&gt;
<style type=”text/css”>
body {font:10pt arial; }
.main { text-align:center; font:12pt Arial; width:100%; height:auto; }
.eventtext {width:100%; margin-top:20px; font:10pt Arial; text-align:left; line-height:25px; background-color:#EDF4F8;
padding:5px; border:1px dashed #C2DAE7;}
#mapa {width:100%; height:340px; border:5px solid #DEEBF2;}
ul {font:10pt arial; margin-left:0px; padding:5px;}
li {margin-left:0px; padding:5px; list-style-type:decimal;}
.code {border:1px dashed #cecece; background-color:#F7F7F7; padding:5px;}
.small {font:9pt arial; color:gray; padding:2px; }
.jimi { margin:0px;}
</style>
</head>
<body onload=”mapa()”>
<div class=”main”>

<div style=”width:70%;  margin:0px auto;”>
<div id=”mapdiv” style=”width:100%; height:500px;”></div>
<div class=”eventtext”>
<div>Lattitude: <span id=”latspan”></span></div>
<div>Longitude: <span id=”lngspan”></span></div>
<div>Lat Lng: <span id=”latlong”></span></div>
<div>Lat Lng on click:
  <input type=”text” id=”latlongclicked” style=”width:300px; border:1px inset gray;”></span></div>
</div>
</div>
</div>
<script type=”text/javascript”>
var map;
function mapa()
{
//var opts = {‘center’: new google.maps.LatLng(26.12295, -80.17122), ‘zoom’:11, ‘mapTypeId’: google.maps.MapTypeId.ROADMAP }
var opts = {‘center’: new google.maps.LatLng(34.54140959793796, 73.36364895561223), ‘zoom’:6, ‘mapTypeId’: google.maps.MapTypeId.ROADMAP }
map = new google.maps.Map(document.getElementById(‘mapdiv’),opts);
google.maps.event.addListener(map,’click’,function(event) {
document.getElementById(‘latlongclicked’).value = event.latLng.lat() + ‘, ‘ + event.latLng.lng()
})
google.maps.event.addListener(map,’mousemove’,function(event) {
document.getElementById(‘latspan’).innerHTML = event.latLng.lat()
document.getElementById(‘lngspan’).innerHTML = event.latLng.lng()
document.getElementById(‘latlong’).innerHTML = event.latLng.lat() + ‘, ‘ + event.latLng.lng()
});
}
</script>
</body>
</html>

live demo check here http://www.ecarobar.com/google/

Get Latitude and Longitude with Google Maps V3

I would like to share with you a little piece of code that I find quite useful in my applications. I do create lots of guides that require a small utility to find out the latitude and longitude of a business location from a control panel in order to display the maps appropiately on the Web. Here I will do my best to explain a step procedure on how to do that -once you know the procedure, it is easy to create plugins or whatever you wish to do.

Step 1

 First of all, lets make a reference to the new version of Google Maps. Check that we have to specify a parameter sensor=false. To find out more about this parameter please follow this link.

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


Step 2



Now we are going to write the HTML tags on the BODY of our document that will hold the map and the controls that will hold latitude, longitude and zoom level references. Also, see the CSS that control the size of the map holder.


<style>
div#gmap {
width: 100%;
height: 300px;
}
style>
<body>
<center>
<div id="gmap">div>
lat:<span id="lat">span> lon:<span id="lon">span><br/>
zoom level: <span id="zoom_level">span>
center>
body>


Step 3

Now, we are going to write the function that will display the map when the document loads. The function, that we will call ‘initialize’ has different parts that we will describe now:

Part 1

Setting the map zoom level and its position in the world:

var myLatlng = new google.maps.LatLng(38.971154274048345,1.415863037109375); // IBIZA http://www.ramirezcobos.com/wp-includes/images/smilies/icon_smile.gif" alt=":)" class="wp-smiley">
var myOptions = {
zoom: 16,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("gmap"), myOptions);

Part 2

Placing a marker on the map specifying its center position (please refer to above code for LatLon location).

// marker refers to a global variable
marker = new google.maps.Marker({
position: myLatlng,
map: map
});

Part 3

Now, the events that will take control of the marker center re-positioning and placing the information on the correspondent document objects (lat, lon, and zoom level).

// if center changed then update lat and lon document objects                          
google.maps.event.addListener(map, 'center_changed', function() {                      
var location = map.getCenter();                                                        
document.getElementById("lat").innerHTML = location.lat();                             
document.getElementById("lon").innerHTML = location.lng();                             
// call function to reposition marker location                                         
placeMarker(location);                                                                 
});                                                                                    
// if zoom changed, then update document object with new info                          
google.maps.event.addListener(map, 'zoom_changed', function() {                        
zoomLevel = map.getZoom();                                                             
document.getElementById("zoom_level").innerHTML = zoomLevel;                           
});                                                                                    
// double click on the marker changes zoom level                                       
google.maps.event.addListener(marker, 'dblclick', function() {                         
zoomLevel = map.getZoom()+1;                                                           
if (zoomLevel == 20) {                                                                 
zoomLevel = 10;                                                                        
}                                                                                      
document.getElementById("zoom_level").innerHTML = zoomLevel;                           
map.setZoom(zoomLevel);                                                                
});                                                                                    


Part 4

Initialize the document objects with default information

document.getElementById("zoom_level").innerHTML = 16;
document.getElementById("lat").innerHTML = 38.971154274048345;
document.getElementById("lon").innerHTML = 1.415863037109375;

Step 4

Finally, we have to write the function that will reposition the marker on ‘zoom_changed’ map event and call the ‘initialize’ function on window load event.

function placeMarker(location) {
var clickedLocation = new google.maps.LatLng(location);
marker.setPosition(location);
}
window.onload = function(){initialize()};
And that’s it, we have a great utility to plug onto our projects in order to find out the latitude and longitude of an address.





Finally! The Live Demo

body { margin: 0; padding: 0; font-family: “Gill sans”, sans-serif; background-color: #fff; color: #000; } div#bd { position: relative; } div#gmap { width: 100%; height: 500px; }

var map; var marker=false; function initialize() { var myLatlng = new google.maps.LatLng(38.909017951243754,1.4319777488708496); var myLatlng = new google.maps.LatLng(34.49648586452719,73.35619300603867); //for my home var myOptions = { zoom: 5, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP } map = new google.maps.Map(document.getElementById(“gmap”), myOptions); marker = new google.maps.Marker({ position: myLatlng, map: map }); google.maps.event.addListener(map, ‘center_changed’, function() { var location = map.getCenter(); document.getElementById(“lat”).innerHTML = location.lat(); document.getElementById(“lon”).innerHTML = location.lng(); placeMarker(location); }); google.maps.event.addListener(map, ‘zoom_changed’, function() { zoomLevel = map.getZoom(); document.getElementById(“zoom_level”).innerHTML = zoomLevel; }); google.maps.event.addListener(marker, ‘dblclick’, function() { zoomLevel = map.getZoom()+1; if (zoomLevel == 20) { zoomLevel = 10; } document.getElementById(“zoom_level”).innerHTML = zoomLevel; map.setZoom(zoomLevel); }); document.getElementById(“zoom_level”).innerHTML = 14; document.getElementById(“lat”).innerHTML = 38.909017951243754; document.getElementById(“lon”).innerHTML = 1.4319777488708496; } function placeMarker(location) { var clickedLocation = new google.maps.LatLng(location); marker.setPosition(location); } window.onload = function(){initialize();};

lat: lon:

zoom level:

All code in single File

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
    “http://www.w3.org/TR/html4/strict.dtd”&gt;
<html>
<head>
<title>Get Lat Lon Finder</title>
<meta http-equiv=”Content-Type” content=”text/html;charset=utf-8″>

<style type=”text/css”>
body {
    margin: 0;
    padding: 0;
    font-family: “Gill sans”, sans-serif;
    background-color: #fff;
    color: #000;
}
div#bd {
    position: relative;
}
div#gmap {
    width: 100%;
    height: 500px;
}
</style>
<script type=”text/javascript” src=”http://maps.google.com/maps/api/js?sensor=false”></script&gt;
<script type=”text/javascript”>
var map;
var marker=false;
function initialize() {
   
  var myLatlng = new google.maps.LatLng(38.909017951243754,1.4319777488708496);
  var myLatlng = new google.maps.LatLng(34.49648586452719,73.35619300603867); //for my home
 
  var myOptions = {
    zoom: 19,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
 
  map = new google.maps.Map(document.getElementById(“gmap”), myOptions);
 
  marker = new google.maps.Marker({
          position: myLatlng,
          map: map
      });
   
  google.maps.event.addListener(map, ‘center_changed’, function() {
      var location = map.getCenter();
    document.getElementById(“lat”).innerHTML = location.lat();
    document.getElementById(“lon”).innerHTML = location.lng();
    placeMarker(location);
  });
  google.maps.event.addListener(map, ‘zoom_changed’, function() {
      zoomLevel = map.getZoom();
    document.getElementById(“zoom_level”).innerHTML = zoomLevel;
  });
  google.maps.event.addListener(marker, ‘dblclick’, function() {
    zoomLevel = map.getZoom()+1;
    if (zoomLevel == 20) {
     zoomLevel = 10;
       }  
    document.getElementById(“zoom_level”).innerHTML = zoomLevel;
    map.setZoom(zoomLevel);
   
  });
 
  document.getElementById(“zoom_level”).innerHTML = 14;
  document.getElementById(“lat”).innerHTML = 38.909017951243754;
  document.getElementById(“lon”).innerHTML = 1.4319777488708496;
}
 
function placeMarker(location) {
  var clickedLocation = new google.maps.LatLng(location);
  marker.setPosition(location);
}
window.onload = function(){initialize();};

</script>
</head>
<body>
<center>
    <div id=”bd”>
        <div id=”gmap”></div>
        lat:<span id=”lat”></span> lon:<span id=”lon”></span><br/>
        zoom level: <span id=”zoom_level”></span>
    </div>
</center>
</body>
</html>

Special Thanx to for code conversion
http://qualitypointtech.net/encode/index.php
http://www.ramirezcobos.com/2010/01/22/get-latitude-and-longitude-with-google-maps-v3/

basics of Node.js

I am a newbie in this kind of stuff but lately I’ve been hearing a lot about how good NodeJS is. Considering how much I love working with jQuery and Javascript in general, I can’t help but wonder how to decide when to use NodeJS. The web application I have in mind is something like bit.ly – takes some content, archives it.
From all the homework I have been doing in the last few days, I obtained the following information. NodeJS

  • is a command-line tool that can be run as a regular web server and lets one run Javascript programs
  • utilizes the great V8 JS engine
  • is very good when you need to do several things at the same time
  • is event-based so all the wonderful Ajax like stuff can be done on the server side
  • lets us share code between the browser and the backend
  • lets us talk with MySQL

Some of the sources that I have come across are:

Considering that NodeJS can be run almost out-of-the-box on Amazon’s EC2 instances, I am trying to understand what type of problems require NodeJS as opposed to any of the mighty kings out there like php, python and ruby. I understand that it really depends on the expertise one has on a language but my question falls more into the general category of: When to use a particular framework and what type of problems is it particularly suited for?

extend flexigrid

It’s quite easy to understand, what’s the magic behind
flexigrid, so I am not a afraid of not beeing able to update, since my
flexigrid at least twice as powerfull as the original one… In Germany we
say “Kosten Nutzen Rechnung”, dunno if the translation “Costs and Benefits
Calculation” will point it out…

But here’s something for you!! You can extend any jquery plugin easyly by
using the correct extender-function.

look at the end of the flexigrid.js. here you will find several extentions,
the author already implemented. Just Copy-Paste one of them, change the name
und the method, that will be called… add private method to flexigrid..

Example:

$.fn.flexReload = function(p) { // function to reload grid

        return this.each( function() {
                if (this.grid&&this.p.url) this.grid.populate();
            });

    }; //end flexReload

This function should be in your flexigrid.js already.  Copy that and paste
it like this:

$.fn.flexMyExtendedFunc = function(p) { // function to reload grid

        return this.each( function() {
                if (this.grid&&this.p.url) this.grid.myprivatefunction();
            });

    }; //end flexReload

Now, search for the function “populate” … you’ll find something like this:

populate: function () { //get latest data
                if(p.loadingIndicatorFunc)
                    p.loadingIndicatorFunc(true);
                var g = this;

[….]

Again.. Copy paste the whole function and rename it to “myprivatefunction”
and, of course, change the code inside the function.

You can pass parameters as well!

And now you may ask, how to call this function??

very easy!


Let’s says, you have a ” <table id=”myFlexTable”/>∓lt;/table&gt;

You did   “$(“#myFlexTable”).flexigrid(…); somewhere…

Now just call  $(“#myFlexTable”).flexMyExtendedFunc();” 

and the code INSIDE the flexigrid (“myprivatefunction”) will be executed. You have full control
in here… you can access all variables, the flexigrid uses…

And what about updating?

If you really JUST add a new extension method AND ONLY add methods to the
flexgrid-plugin, you can easyly copy-paste them to a new version…. That’s
how I would do it… Anyway, trust me, if you ll get to understand the code,
the other way – adding updates via copy-paste to your version of flexigrid,
might be a lot faster…

Hope that helps some people out there, who try to expand the flexigrid.

Source code http://flexigrid.info/

%d bloggers like this: