Working with Google Map GeoCodes – Latitudes and Longitudes

geocode

Foursquare, what’s app ,GetGlue and many more….  All of these applications are using google Maps API more or less to display the location data. This post will illustrate you the in and outs of using Google MAP API.

Lets create a simple map using google map.

<!DOCTYPE html>
<html>
 <head>
 <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
 <meta charset="utf-8">
 <title>Simple markers</title>
 <style>
 html, body, #map-canvas {
 height: 500px;
 width:700px;
 margin: 0px;
 padding: 0px
 }
 </style>
 <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
 <script>
// This example displays a marker at the center of Australia.
// When the user clicks the marker, an info window opens.

function initialize() {
 var myLatlng = new google.maps.LatLng(52.43161468911457,13.534797998425347);
 var mapOptions = {
 zoom: 4,
 center: myLatlng
 };

 var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

 var marker = new google.maps.Marker({
 position: myLatlng,
 map: map,
 title: 'Uluru (Ayers Rock)'
 });
}

google.maps.event.addDomListener(window, 'load', initialize); </script>
 </head>
 <body>
 <div id="map-canvas"></div>
 </body>
</html>

This is the map

simple-mp-wit-marker

Common errors with google map drawing.

Uncaught RangeError: Maximum call stack size exceeded

This can be occurred due to the usage of invalid location details. For example latitude = 12.333.44 which has two (2) decimal points. So before using any location data value, keep in my to validate them.

Setting Zoom level for Google Maps:

Zoom level can be set in two different ways.

  1. As a constant
  2. Dynamic Zoom level

The above example zoom level is set as a constant. But when it comes to the large number of markers, zoom level should be set so as all the markers are located in the visible range.

For that we need to use Bounds object (extends from new google.maps.LatLngBounds() object). Then when the map markers are iterating inside the loop, this bound is extended.


// create bound object
var boundObject = new google.maps.LatLngBounds();
var siteLatLng = new google.maps.LatLng(latitude,longitude);
boundObject.extend(new google.maps.LatLng(siteLatLng));

// End of the loop
// fit the bounds to the map

map.fitBounds(boundObject);
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