Google Maps Address Interaction(postcode) using

I am using jquery, html5 for this example.

HTML

Load the google maps api link

https://maps.googleapis.com/maps/api/js?sensor=true

This will be the container of the google maps Note: Set height for your google map container.

JS

var map;

var geocoder;

//This function intialize the google maps settings

function initialize() {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var mapOptions = {
        zoom: 16, center: latlng, disableDoubleClickZoom: true
    }
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}

//This function sets the address for the google map
function codeAddress(address) {
    geocoder.geocode({'address': address}, function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            map.setCenter(results[0].geometry.location);
            var marker = new google.maps.Marker({
                map: map,
                position: results[0].geometry.location
            });
        } 
    });
}

//now its time to load the google maps

$(document).ready(function(){

     initialize();
     codeAddress('600'); //set default postcode

});


Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s