Home PHP JavaScript CSS WordPress APIs .htaccess Other How-To Useful Scripts What I Recommend
Posted on by Aleksandar Gichevski ()
Showing specific place or location on a website hasn't been easier. Thanks to Google we can use their API and integrate Google Maps and Google Street View anywhere we want. For those that don't know let's explain these 2 services.

What is Google Maps

Google Maps is a web mapping service application that powers many map-based services, including Google Maps website, Google Ride Finder, Google Transit and maps embedded on third-party websites. It offers street maps and a route planner for traveling by foot, car, bike or with public transportation and it also includes locator for urban businesses in numerous countries.

What is Google Street View

Google Street View is a technology featured in Google Maps and Google Earth that provides panoramic views from positions along many streets in the world. It was launched on May 25, 2007, in several cities in the United States, and has since expanded to include cities and rural areas worldwide.Where available, Street View images appear after zooming in beyond the highest zooming level in maps and satellite images, and also by dragging a "pegman" icon onto a location on a map.

Google Maps - search by Address

Using Google Maps API we are able to integrate Google Maps on many ways and use it exactly for the purpose we need. In our example I will place a Google Map that will show location based on the provided Address parameter. First what we need to do is create basic HTML/PHP page with following code:



Google Maps API Integration



    

Please enter address:

In above code we have 2 main elements:
  • [id=map-canvas] represents div element that will contain the Google Map.
  • [form] element that is used to enter desired address and execute POST action in order to be generated new Map
In HEAD section we add JavaScript code that is used for generating Google Map. We add reference to Google API JavaScript document and create function codeAddress that accepts address parameter for generating map.


The page now creates Google Map that has marker in center of New York. We will modify the last line of this JavaScript code and write few lines of PHP to accept the parameter from the form and parse it into codeAddress() function. New modified code will look like this:


google.maps.event.addDomListener(window, 'load', codeAddress(''));
We have successfully coded Google Map search by address service using Google API code.

Google Street View - search by Address

If we want also to add Street View service we just need to add few more lines of code and our visitors will be able to see panoramic view on the desired address. Add new div element [id=pano] right below our div element for google map [id=map-canvas]
Update the function codeAddress() below code for showing marker add following code for generating Google Street View:
var panoramaOptions = {
	position: results[0].geometry.location,
	pov: {
	 heading: 34,
	 pitch: 10
	}
};
var panorama = new  google.maps.StreetViewPanorama(document.getElementById('pano'),panoramaOptions);
map.setStreetView(panorama);
That's it.. you should see now Google Maps and Google Street View on same page. Here is full code of the example:



Google Maps API Integration







    

Please enter address:


Other Posts You Might Like

Get a fast, free website audit


Enter your URL below to get full in-depth SEO report and tips.

‚Äč

Useful Scripts

Most Popular Posts

Recent Posts

June 14th, 2014
Website Optimization Using Gzip Compression

June 10th, 2014
Google Search AutoComplete API

May 14th, 2014
What is a Tag Cloud and How to Calculate it by Formula

March 27th, 2014
Error writing file /tmp (errcode 28) Solved!

February 15th, 2014
Fixed CSS & HTML Navigation Bar

February 9th, 2014
Benchmark Your Server (CPU, File IO, MySQL) with SysBench

February 8th, 2014
JavaScript Array Basics

January 29th, 2014
JVZoo IPN API in PHP

January 25th, 2014
Payoneer Debit Card for Freelancers to receive money online

January 24th, 2014
How HTML Color Codes are generated?

Read Latest Posts directly on Facebook

Archive