Showing posts with label maps. Show all posts
Showing posts with label maps. Show all posts

Tuesday, October 23, 2012

Fix Panel to take boundaries

Use Fix Panel to Take Boundaries in Google Maps :


This post is intended in using fix panel to determine the boundaries from Google maps !!!


<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;}
#box{border: 1px solid #FF0000;background-color: #AFAFAF;width: 160px;height: 64;font-size: 11px;}
#box .line{border-bottom: 1px solid #FF0000;overflow: auto;clear: both;height: 16px;}
#box #lng-west{border-bottom: 0px;}
#box .name{width: 30px;border-right: 1px solid #FF0000;float: left;}
#box .value{float: left;}
</style>
<script type="text/javascript">
$(function(){
  var box = '<div id="box">' +
  '<div id="lat-north" class="line"><div class="name">North</div><div class="value"></div></div>' +
  '<div id="lng-east" class="line"><div class="name">East</div><div class="value"></div></div>' +
  '<div id="lat-south" class="line"><div class="name">South</div><div class="value"></div></div>' +
  '<div id="lng-west" class="line"><div class="name">West</div><div class="value"></div></div>' +
  '</div>';
  $('#test1').gmap3(
    {action: 'addFixPanel',options:{content: box,middle: true},
      events:{
        bounds_changed: function(map){
        var bounds = map.getBounds();
        var ne = bounds.getNorthEast();
        var sw = bounds.getSouthWest();
        $("#lat-north .value").html(ne.lat());
        $("#lng-east .value").html(ne.lng());
        $("#lat-south .value").html(sw.lat());
        $("#lng-west .value").html(sw.lng());
      }
    }
  });
 });
</script>
</head>
<body>
<div id="test1" class="gmap3"></div>
</body>
</html>

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>