Google Maps API

Google Maps API

Google maps API is API which allows users use google maps service in their application. In this article we will introduce Google maps API for web application. By default google maps API use latitude and longitude to describe center point of map.

How to use google maps API? At first we must define where the map will described. We can use div HTML tag with ID to do this. For example we use div with ID “map-canvas”

[code language="ruby"]
 <div id="map-canvas"></div>
[/code]

 

And then we use javascript to draw map we need :

[code language="ruby"]
 var map; function initialize()
  { var mapOptions =
   { zoom: 8,
     center: new google.maps.LatLng(-34.397, 150.644),
     mapTypeId: google.maps.MapTypeId.ROADMAP
   };
   map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
  }
 google.maps.event.addDomListener(window, 'load', initialize);
[/code]

 

Explanation: var map is define variable that we use for create a new map. var map is define parameter option that we use for map. zoom is define zoom level of map. center is define center point of map. Number (-34.397, 150.644) is coordinate with format (latitude, longitude) mapTypeId is define map type that we will use. ROADMAP can be replaced with the following options: ROADMAP (normal, default 2D map) SATELLITE (photographic map) HYBRID (photographic map + roads and city names) TERRAIN (map with mountains, rivers, etc.)

If we see broken control GUI in map, we must set max-width: none for img in css file.There are a lot of option that we can use for our map, one of them we can use option to define what control that we want use in our map. We can add this code to our mapOptions :

[code language="ruby"]
 panControl: false,
 zoomControl: false,
 scaleControl: true
[/code]

 

1. Marker

 

Beside a simple map we can add a marker to mark a position. For example, we use variable marker to define marker position.

[code language="ruby"]
 function initialize()
  { var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
    var mapOptions =
     { zoom: 4,
       center: myLatlng,
       mapTypeId: google.maps.MapTypeId.ROADMAP
     }
    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    var marker = new google.maps.Marker(
     { position: myLatlng,
       map: map,
       title: 'Hello World!'  
     });
  }
 google.maps.event.addDomListener(window, 'load', initialize);
 [/code]

 

Explanation: var myLatlng = new google.maps.LatLng(-25.363882,131.044922), declare position and inpuit this value to myLatlng variable. title will be shown if we hover marker with mouse cursor. we not only can draw one marker in a map. we can loop var marker with different position value to provide more than one marker.

Beside we use default marker, we can use image file to change our marker picture, let see this code :

[code language="ruby"]
 var marker = new google.maps.Marker(
  { position: myLatLng,
    map: map,
    icon: /'assets/schools_maps.png'
  });
[/code]

 

We add icon parameter and enter value with picture location.

 

2. Simple Info Windows

 

We can provide an info window that we can fill with a word or anything HTML tag. For example we add info windows with “41studio” word inside :

[code language="ruby"]
 var contentString = '<div
	id="content">'+"41studio"+ '</div>';
 var infowindow = new google.maps.InfoWindow(
  { content: contentString });
    google.maps.event.addListener(marker, 'click',function() { infowindow.open(map,marker); });
[/code]

 

var contentString is used to define what we will add to Info Windows

google.maps.event.addListener(marker, 'click', function() { infowindow.open(map,marker); });

This code use to add event shown infobox when we click marker.

 

3. Geocoding

 

We can provide a location from address with geocoding service. for example we use chicago for the value. let see the code example :

[code language="ruby"]
 var geocoder;
 var map;
 function initialize()
  { geocoder = new google.maps.Geocoder();
    var address = "chicago";
    geocoder.geocode(
     { 'address': address}, function(results, status)
     { if (status == google.maps.GeocoderStatus.OK)
      { var mapOptions =
         { zoom: 8,
           center: results[0].geometry.location,
           mapTypeId: google.maps.MapTypeId.ROADMAP
         }
        map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
        google.maps.event.addDomListener(window, 'load', initialize);
      });
     }
     else
     { alert('Geocode was not successful for the following reason: ' + status);}
  }
[/code]

 

We define address and input it to address variable. after that we call function from Google Maps Api geocoder.geocode this function will be produce results as location and status from geocode process. we use if conditional, if geocode process success and produce status “OK” we draw map with center results[0].geometry.location, location results of geoceder process.

 

4. Directions

 

We can produce direction beetween two postition. Lets see this code :

[code language="ruby"]
 var directionsDisplay;
 var directionsService = new google.maps.DirectionsService();
 var map; function initialize()
  { directionsDisplay = new google.maps.DirectionsRenderer();
    var start = new google.maps.LatLng(41.850033, -87.6500523);
    var end = new google.maps.LatLng(41.850033, -87.6500523);
    var mapOptions =
     { zoom:7,
       mapTypeId: google.maps.MapTypeId.ROADMAP,
       center: start
      }
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    directionsDisplay.setMap(map);
    var request =
     { origin:start,
       destination:end,
       travelMode:google.maps.DirectionsTravelMode.DRIVING
      }
    directionsService.route(request, function(response, status)
     { if (status == google.maps.DirectionsStatus.OK)
       { directionsDisplay.setDirections(response);
        }
      });
  }
   google.maps.event.addDomListener(window, 'load', initialize);
[/code]

 

After we define map as before, we provide new variable to accommodate direction parameter, in this example we use request. origin is parameter to determine start position destination is parameter to determine end position travelMode is parameter to determine travel mode in direction, we can change “DRIVING” with this following value: “WALKING” “BICYCLING” “TRANSIT” After that we call google maps function to provide a directions, directionsService.route.

Same as geocoding this function will provide two value, one status and others response. if this function provide status “OK” we provide directions with this code :

[code language="ruby"]
 directionsDisplay.setDirections(response);
[/code]

 

5. Draggable Directions

 

We can change directions that provide with the last code into a draggable directions. We just add new variable to accommodate parameter draggable :

[code language="ruby"]
 var rendererOptions = { draggable: true };
[/code]

 

After that we call that variable by change this code :

[code language="ruby"]
 directionsDisplay = new google.maps.DirectionsRenderer();
[/code]

 

To :

[code language="ruby"]
 var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
[/code]

 

 

%d bloggers like this: