Showing posts with label gmaps3. Show all posts
Showing posts with label gmaps3. Show all posts

Tuesday, October 23, 2012

Add Info Window in Google Maps

Adding an info window forms a integral part in the places where some note has to be placed , so inorder to use that inside Google maps this post will aid you !!!




<html>
<head>
<script type="text/javascript" src="../jquery/jquery-1.4.4.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript" src="../gmap3.js"></script>
<style>
.gmap3{margin: 20px auto;border: 1px dashed #C0C0C0;width: 500px;height: 250px;}
</style>
<script type="text/javascript">
$(function(){
  $('#test1').gmap3({
    action: 'addInfoWindow',
    address: "Coimbatore,India",
    map:{
      center: true,
      zoom: 14
    },
    infowindow:{
      options:{
        size: new google.maps.Size(50,50),
        content: 'Hello World !'
      },
    events:{
      closeclick: function(infowindow){
        alert('closing : ' + $(this).attr('id') + ' : ' + infowindow.getContent());
      }
    },
    apply:[
      {action:'setContent', args:['Here is a new content !']}
    ]
    }
    },
    {action: 'setOptions', args:[{scrollwheel:true}]}
    );
  });
</script>
</head>

<body>
<div id="test1" class="gmap3"></div>
</body>
</html>
Posted by at No comments:
Labels: , , , , , , , , , , ,
Location: Coimbatore, Tamil Nadu, India

Use Forms in Maps

Fill in an address, a marker will be added and the map will be centered on it :

Show places on the button click event, that is achieved using jQuery $('#test-ok').click(function(){}  once its done the value in the text box is passed to the gmaps3 plugin and action 'getlatlng' is done , In the call back method of that action marker is added to the respective address typed its actually center it which makes the map look Cool :) :) 

<html>
<head>
<script type="text/javascript" src="../jquery/jquery-1.4.4.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript" src="../gmap3.js"></script>
<style>
body {text-align: center;}
#ctrl {width: 500px;margin: 0 auto;}
.gmap3 {margin: 20px auto;border: 1px dashed #C0C0C0;width: 500px;
        height: 250px;}
</style>
<script type="text/javascript">
$(function(){
  $("#test").gmap3();
  $('#test-ok').click(function(){
  var addr = $('#test-address').val();
  if ( !addr || !addr.length ) return;
  $("#test").gmap3({
    action:   'getlatlng',
    address:  addr,
    callback: function(results){
      if ( !results ) return;
      $(this).gmap3({
      action:'addMarker',
      latLng:results[0].geometry.location,
      map:{
        center: true
      }
      });
    }
   });
  });
  $('#test-address').keypress(function(e){
  if (e.keyCode == 13){
    $('#test-ok').click();
  }
  });
});
</script>
</head>
<body>
<div id="ctrl">Address : <input type="text" id="test-address" size="60">
<button type="button" id="test-ok">Ok</button>
</div>
<div id="test" class="gmap3"></div>
Fill in an address, a marker will be added and the map will be centered on it
</body>
</html>




Posted by at No comments:
Labels: , , , , , , , , , , , , , , ,
Location: Coimbatore, Tamil Nadu, India

Find distance b/w places

Now we have come to an interesting part , Do you need to find the distance between any two places aroud the world , it's achieved using jQuery maps3 plugin . This is achieved by using the action 'getDistance' and the travel model used here 'google.maps.TravelMode.DRIVING'. Now enjoy calculating the distance between your fav places around the world .

 If no Results are found we display a message 'No route could be found between the origin and destination'

 If the Source and the destion could not be identified then we display a message 'The origin and/or destination of this pairing could not be geocoded'


<html>
<head>
<script type="text/javascript" src="../jquery/jquery-1.4.4.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript" src="../gmap3.js"></script>
<style>
.gmap3 {
  margin: 20px auto;
  border: 1px dashed #C0C0C0;
  width: 1024px;
  height: 768px;
}
</style>
<script type="text/javascript">
function distance(){
  $('body').gmap3({
    action:'getDistance',
    options:{
      origins:[$('#origins').val()],
      destinations:[$('#destinations').val()],
      travelMode: google.maps.TravelMode.DRIVING
    },
    callback: function(results){
      var html = '';
      if (results){
        for (var i = 0; i < results.rows.length; i++){
          var elements = results.rows[i].elements;
          for(var j=0; j<elements.length; j++){
            switch(elements[j].status){
              case google.maps.DistanceMatrixStatus.OK:
                html += elements[j].distance.text + ' (' + elements[j].duration.text + ')<br />';
                break;
              case google.maps.DistanceMatrixStatus.NOT_FOUND:
                html += 'The origin and/or destination of this pairing could not be geocoded<br />';
                break;
              case google.maps.DistanceMatrixStatus.ZERO_RESULTS:
                html += 'No route could be found between the origin and destination.<br />';
                break;
            }
          }
        }
      } else {
        html = 'error';
      }
      $('#results').html( html );
    }
  });
}
</script>
</head>

<body>
Origin :
<input type="text" id="origins" />
Destination :
<input type="text" id="destinations" />
<input type="button" id="distance" value="distance" onclick="distance();">
<br />
<br />
Results :
<div id="results"></div>
</body>
</html>


Google maps get Distance using map3 Plugin

Posted by at No comments:
Labels: , , , , , , , , ,
Location: Coimbatore, Tamil Nadu, India

Adding Markers using selectors

jQuery Google Maps : Adding Markers using selectors

jQuery with Google Maps has become pretty easier after the invention of gmaps3 plugin .
This post helps in adding markers inside maps using some jQuery selectors.

All the three maps are invoked through the class selector "gmap3" while the markers in the second map is invoked through "#test2" id selector & first map again through ".gmap3.top" class selector.

<html>
<head>
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript" src="gmap3.js"></script>
<style>
.gmap3 {
  margin: 20px auto;
  border: 1px dashed #C0C0C0;
  width: 500px;
  height: 250px;
}
</style>

<script type="text/javascript">
  $(function() {

    $('.gmap3').gmap3( {
      action : 'init',
      options : {
        center : [ 22.49156846196823, 89.75802349999992 ],
        zoom : 2,
        mapTypeId : google.maps.MapTypeId.SATELLITE,
        mapTypeControl : true,
        mapTypeControlOptions : {
          style : google.maps.MapTypeControlStyle.DROPDOWN_MENU
        },
        navigationControl : true,
        scrollwheel : true,
        streetViewControl : true
      },
      events : {
        rightclick : function(map, event) {
          $(this).gmap3( {
            action : 'addMarker',
            latLng : event.latLng
          });
        }
      }
    });

    $('#test2').gmap3( {
      action : 'addMarker',
      latLng : [ 29.132318972825445, 81.32052349999992 ]
    });

    $('.gmap3.top').gmap3( {
      action : 'addMarker',
      latLng : [ 29.132318972825445, 81.32052349999992 ]
    });

  });
</script>
</head>

<body>
<div id="test1" class="gmap3 top"></div>
<div id="test2" class="gmap3 middle"></div>
<div id="test3" class="gmap3 bottom"></div>
</body>
</html>



Posted by at No comments:
Labels: , , , , , ,
Subscribe to: Posts (Atom)