Posted by: phillipnb | February 1, 2013

Using Google Maps API


Google Maps API along with PHP has been in use for quite some time. This article is honestly a bit late for this topic but my intention is to give a brief introduction to those people who find it hard to get started with Google Maps API. So, let us get started. The first thing that you need to do if you want to work with Google Maps is to register with Google and get a API Key. This key is required if you want to use Google’s Map API feature. You can do the registration using this link.

Now that the registration is complete, let us get familiar with the nuts and bolts of Google Map API. First – get familiar with a few google map api terms like – Types of maps, Map Control, Map event, Map overlays etc. As of now, Google basically has four types of maps. They are Road Map, Satellite, Hybrid and Terrain. Each of these maps has a special purpose and you need to decide which type of map satisfies your need.

Every map comes with a set of default controls. Controls are those what allows the user to interact with the maps. Some of the default controls are Zoom, Pan, MapType, Scale, Rotate etc etc. The Zoom control displays a slider with “+/-” buttons to control the zoom level of the map. The Scale control allows you to display a map scale element. So much about controls, now let us talk about Map Events. Map events are basically the execution of the action that happens when the user handles the controls. For e.g. if we want to zoom the map when the user clicks on a marker then , we need to attach a event handler to a marker that will zoom the map when clicked. So, when the click event happens for zooming, that click event is trapped and appropriate action need to be taken. The last item that we need to discuss is the Map Overlays. Overlays are objects of the Map Class that are bound to the latitude and longitude co-ordinates. Marker, Polyline, Polygon etc are the different types of overlays that Google Maps currently has.

So far we saw what are the different types of maps that Google Maps can provide, what do we mean by a Map Control, what is a Map Event, what is meant by Map Overlays etc etc. Now, let us put all of the above terms together and create a map. Here is the completed example:
(In the below example, make sure you change the values for API key and sensor)

<html>
  <head>
    <style type="text/css">
      #map_table { height: 100% }
    </style>
    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_FROM_GOOGLE&sensor=your_sensor_value-as_true_or_false">
    </script>
    <script type="text/javascript">
      function initialize() {
        var mapOptions = {
          center: new google.maps.LatLng(46.397, 6.144),
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.HYBRID
        };
        var map = new google.maps.Map(document.getElementById("map_table"),
            mapOptions);
      }
    </script>
  </head>
  <body onload="initialize()">
    <div id="map_table" style="width:60%; height:60%"></div>
  </body>
</html>

Those of you who would like to know more about Google Maps API should visit https://developers.google.com/maps/documentation/javascript/tutorial


Leave a comment

Categories