How to Integrate Google Maps with Web Applications using JavaScript
Azoft Blog How to Integrate Google Maps with Web Applications using JavaScript

How to Integrate Google Maps with Web Applications using JavaScript

By Anton Kavytin on March 20, 2013

Sometimes I just want to say big thanks to Google's developers for the Google Maps API, especially version 3 which we use in many of our web projects. If you're developing location-aware web services and need a quick start, this post is for you. Read on to find out how to add mapping functionality to your web application using JavaScript.

The map display provided by Google Maps is initialized with the following code:

var mapCenter = new google.maps.LatLng(mapOptions['center']['lat'], mapOptions['center']['lng']);
var myOptions = {
	center: mapCenter,
	mapTypeId: google.maps.MapTypeId.ROADMAP
}
var Map = google.maps.Map(document.getElementById(‘Map’), myOptions);

To mark a place on the map, use the code below:

var markerLatLng = new google.maps.LatLng(lat,lng);//lat, lng – new coordinates of the marker
var markerOpt = {
	position: markerLatLng,
	map: Map
};
var marker = new google.maps.Marker(markerOpt);

A marker can have an information box that may either appear when the marker is initialized or when the marker is clicked on screen:

//adding function to marker click event
google.maps.event.addListener(marker, 'click', function() {
	infoWindow.open(Map, marker);
});
//show marker dialog window 
infoWindow.open(Map, marker);

Route planning

Google Maps has a routing feature that allows connecting two points on a map with a route:

var directionsDisplay = new google.maps.DirectionsRenderer();
directionsDisplay.setMap(Map);
var directionsService = new google.maps.DirectionsService();
var request = {
			origin: start,
			destination: end,
			travelMode: google.maps.TravelMode.DRIVING
		};
 directionsService.route(request, function(result, status) {
        if (status == google.maps.DirectionsStatus.OK) {
		directionsDisplay.setDirections(result);
        }
});

A warning message will appear if it's impossible to build a route between the chosen points. When the route is displayed, a pair of markers for start and end points will be displayed as well. To hide these markers, add the following code before the route initialization:

directionsDisplay.setOptions({suppressMarkers: true});

It is possible to remove the default markers and replace them with custom markers.

Map centering

To center a map around a given point, use the following method:

var mapCenter = new google.maps.LatLng(lat, lng);//lat, lng – coordinates of the new map center
Map.setCenter(mapCenter);

Address lookup

One very useful feature that I'd like to mention is address lookup. It's very easy to add address lookup functionality to your application:

var geocoder = new google.maps.Geocoder();
geocoder.geocode( { 'address': address}, function(results, status) {//address – search address
	if (status == google.maps.GeocoderStatus.OK) {	
		for( var i = 0, l = results.length; i < l; i++ ) {
			//working with the variants found
		} 
	} else {
		alert("Geocode was not successful for the following reason: " + status);
	}
});

The above examples only cover the basic possibilities provided by Google Maps, but the most essential ones. By adding Google Maps functionality to your application you can easily implement searching for a nearby fuel station or the shortest path home. Happy coding!

VN:F [1.9.22_1171]
Rating: 4.2/5 (5 votes cast)
VN:F [1.9.22_1171]
Rating: +2 (from 2 votes)
How to Integrate Google Maps with Web Applications using JavaScript, 4.2 out of 5 based on 5 ratings



Request a Free Quote
 
 
 

Please enter the result and submit the form

Content created by Anton Kavytin