Google maps API 3 example, Search an address

Google-maps-Api-301

In this very simple tutorial Im going to shows you how to use the Google maps API 3 to search an address and show the location on the map.
Im going to use just some lines of jQuery to bind click event on the button.

The HTML Code



First of all we need to include some javascript libraries , for google maps we need to add

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript"   src="https://maps.google.com/maps/api/js?sensor=false"></script>


The meta tag allows us to define the inital scale for the map, and the script tag load the googlemaps api on our page.

For the map inclusion if we check the google API3 documentation google maps Doc
the only thing we need is just add a simple tag on the body.


<body>
 <div id="map_canvas" style="width:100%; height:100%"></div>
</body>


that is where you are going to show the map, the attributes width and height on the style refers to the size of the map. I also added an textbox and a input button to allow the user enter an address.


<body>
<input id="address" placeholder="Enter your Address" type ="text" />
<input id="search" type="button" value ="Search" /> 
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>


to simplify the process I remove the divs and containers that are needed to center the html elements, ofcourse you can download the full example that also includes blueprint css framework to define proportions and styles.


The javascript Code


on the javascript part we are going to define an initialize función with only one parameter "address" this param will contein the address enter by the user, as a result the funtion will render the map on the page with the right address and a mark on the right point.


  function initialize(address) {
        // I create a new google maps object to handle the request and we pass the address to it
	var geoCoder = new google.maps.Geocoder(address)
        // a new object for the request I called "request" , you can put there other parameters to specify a better search (check google api doc for details) , 
        // on this example im going to add just the address  
	var request = {address:address};
        
        // I make the request 
	geoCoder.geocode(request, function(result, status){
                // as a result i get two parameters , result and status.
                // results is an  array tha contenis objects with the results founds for the search made it.
                // to simplify the example i take only the first result "result[0]" but you can use more that one if you want

                // So , using the first result I need to create a  latlng object to be pass later to the map
                var latlng = new google.maps.LatLng(result[0].geometry.location.lat(), result[0].geometry.location.lng());  

		// some initial values to the map	
		var myOptions = {
		  zoom: 15,
		  center: latlng,
		  mapTypeId: google.maps.MapTypeId.ROADMAP
		};

             // the map is created with all the information 
               var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);

             // an extra step is need it to add the mark pointing to the place selected.
        	var marker = new google.maps.Marker({position:latlng,map:map,title:'title'});

	})
  }

6 Responses to "Google maps API 3 example, Search an address"

Leave a comment to Elizeu


9 × = eighteen