How to get started with Google Maps API?


Building Interactive Map layouts has gotten easier with the latest release of Google Maps APIs. Want to build something that looks like:
example_streetview
How does one achieve this sort of a functionality?..simple!! make use of the Street View Service. Let’s look at some access strategies and sample source code.

Directly Accessing Street View Data

You may wish to programmatically determine the availability of Street View data, or return information about particular panoramas, without requiring direct manipulation of a map/panorama. You may do so using theStreetViewService object, which provides an interface to the data stored in Google’s Street View service.

Street View Service Requests

Accessing the Street View service is asynchronous, since the Google Maps API needs to make a call to an external server. For that reason, you need to pass a callback method to execute upon completion of the request. This callback method processes the result.

You may initiate two types of requests to the StreetViewService:

  • Request with a StreetViewPanoRequest, this returns panorama data given a reference ID which uniquely identifies the panorama. Note that these reference IDs are only stable for the lifetime of the imagery of that panorama.
  • Request with a StreetViewLocationRequest this searches for panorama data over a given area, given a passed LatLng.

Street View Sample Source Code

<body>

id=”map” style=”width: 45%; height: 100%;float:left”>
id=”pano” style=”width: 45%; height: 100%;float:left”>
/*
* Click the map to set a new location for the Street View camera.
*/

var map;
var panorama;

function initMap() {
var berkeley = {lat: 37.869085, lng: -122.254775};
var sv = new google.maps.StreetViewService();

panorama = new google.maps.StreetViewPanorama(document.getElementById(‘pano’));

// Set up the map.
map = new google.maps.Map(document.getElementById(‘map’), {
center: berkeley,
zoom: 16,
streetViewControl: false
});

// Set the initial Street View camera to the center of the map
sv.getPanorama({location: berkeley, radius: 50}, processSVData);

// Look for a nearby Street View panorama when the map is clicked.
// getPanoramaByLocation will return the nearest pano when the
// given radius is 50 meters or less.
map.addListener(‘click’, function(event) {
sv.getPanorama({location: event.latLng, radius: 50}, processSVData);
});
}

function processSVData(data, status) {
if (status === google.maps.StreetViewStatus.OK) {
var marker = new google.maps.Marker({
position: data.location.latLng,
map: map,
title: data.location.description
});

panorama.setPano(data.location.pano);
panorama.setPov({
heading: 270,
pitch: 0
});
panorama.setVisible(true);

marker.addListener(‘click’, function() {
var markerPanoID = data.location.pano;
// Set the Pano to use the passed panoID.
panorama.setPano(markerPanoID);
panorama.setPov({
heading: 270,
pitch: 0
});
panorama.setVisible(true);
});
} else {
console.error(‘Street View data not found for this location.’);
}
}

async defer
src=”https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap”&gt;

</body>

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