Polygon area with google autocomplete for limited region | 2my4edge

12 April 2017

Polygon area with google autocomplete for limited region

As told you in my previous article, today i'm going to explain you about provide service only to the selected region in google map api with autocomplete, this one is very simple one, here inside that selected polygon array region. My previous article about polygon region array selection. Lets see about provide service only to the selected region in polygon array.

polygon array with autocomplete
LIVE DEMO                                  DOWNLOAD

HTML CODE

<div align="center">
<script src="https://maps.googleapis.com/maps/api/js?key=
                     [API-KEY]&libraries=places,geometry" async defer></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
    </script>
<script src="js/jquery.geocomplete.js"></script>
<input class="form-control" type="text" id="PickupAddress" required class="required" /> 
<input type="hidden" id="pickupLatitude" class="form-control" required="required">
<input type="hidden" id="pickupLongitude" class="form-control" required="required">          
<p class="showerror" style="display:none; background-color:red; 
             padding:1%; " align="center">SERVICE NOT AVAILABLE FOR THAT AREA..</p>
</div>
<div id="mapCanvas" style="height: 750px;"></div>

SCRIPT TO LOAD MAP AND AUTOCOMPLETE WITH POLYGON REGION
<script>
var map;
var google;
var latlong;


$(document).ready(function () {
    initialize();
});

function initialize() {

var myLatlng1 = new google.maps.LatLng(12.9716, 77.5946);

var mapOptions = {
 zoom: 8,
 center: myLatlng1,
 mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('mapCanvas'),mapOptions);

var zone = [[14.022132, 75.571558], 
            [14.681398, 77.602789], 
            [13.627854, 79.420593], 
            [12.116034, 78.162132], 
            [11.986247, 75.376120]
           ];

var box = [];
$.each(zone, function(index, item){
    var kpoint = new google.maps.LatLng(item[0], item[1]);
    box.push(kpoint);
});


polygon_area = new google.maps.Polygon({
    path: box,
    map: map,
    strokeColor: '#2cae72',
    strokeOpacity: 0.8,
    strokeWeight: 1,
    fillColor: '#2cae72',
    fillOpacity: 0.2
});
}

$(function () {
    $("#PickupAddress")
        .geocomplete()
        .bind("geocode:result", function (event, result) {
        $("#spanPick").text($("#PickupAddress").val());
        
        var latitude  = result.geometry.location.lat();
        var longitude = result.geometry.location.lng();
        
        $('#pickupLatitude').val(latitude);
        $('#pickupLongitude').val(longitude);
                
        var curPositionB = new google.maps.LatLng(latitude, longitude);
        var result = google.maps.geometry.poly.containsLocation(curPositionB, polygon_area);
        if(result == true){
        routeDirection("PickupAddress", curPositionB);
        }else{
        $('.showerror').show();
        $(".showerror").hide( 5000 );
        $('#PickupAddress').val('');
        $('#PickupAddress').focus();
        }   
        
      });





function routeDirection(id, latLong) {
    geocoder = new google.maps.Geocoder();
    var mapOptions = {
        zoom: 12,
        center: latLong,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById('mapCanvas'), mapOptions);
    var start = $("#PickupAddress").val();
    if (start != null) {
        geocoder.geocode({ "address": start }, function (results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                map = new google.maps.Map(document.getElementById('mapCanvas'), mapOptions);
                marker = new google.maps.Marker({
                    position: latLong,
                    map: map,
                });
            }
        });
    }
  };





});
</script>

the variable zone in script, you can add more number of region as you need. you can change it. routeDirection function is to show the marker after you selected the place. and for this you need to add google api library places for autocomplete and geometry for containsLocation. 
Hope you like this article, if you have any queries, Please comment in the below box. i will reply you. Be in touch with us in social media to frequent contact. thank you.

2 comments:

  1. I was more than happy to find this web site. I need to thank you for your moment due to this unbelievable read!! I definitely savored every bit of it and I have you book-marked to see new things in your web site. click here

    ReplyDelete
  2. I really impressed after read this because of some quality work and informative thoughts. I just wanna say thanks for the writer and wish you all the best for coming! Back Office Services

    ReplyDelete

^