Introduction to Google Maps.
Google Maps API have been in tech world since quite a long period. Recently I had a chance to try my hands on Google Maps API. If you like JavaScript believe me you will gonna love Google Maps API. Thousand of APIs are available to paint a lot of things on Google Map. You can describe a wind range of data using Google Maps API.

Generate key for your website.

In order to use Google Map API, first you need to generate an API key that you will use to include google maps javacript in your web page. To generate API, goto http://code.google.com/apis/maps/signup.html

Displaying a Simple Map.

To paint a simple map showing a particular location use following code. 
<script type="text/javascript">


function initialize() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map_canvas"));
        map.setCenter(new GLatLng(37.4419, -122.1419), 13);
      }
}

    </script>
</head>

<body onload="initialize()" onunload="GUnload()">
    <div id="map_canvas" style="width: 500px; height: 300px"></div>
</body>

Code language: HTML, XML (xml)

Online Demo

Click here.

Display an Infobox in your map.

To display an infobox, modify your initialize() method and add following code in it. 
function initialize() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map_canvas"));
        map.setCenter(new GLatLng(37.4419, -122.1419), 13);
        map.openInfoWindow(map.getCenter(),
                           document.createTextNode("Hello, world"));
      }
}

Code language: JavaScript (javascript)

Online Demo

Click here.

Latitude/Longitude tracing demo.

I have created a simple demo that display latitude/longitude of any place where you click on google map. 
function initialize() {
 if (GBrowserIsCompatible()) {
        
  var map = new GMap2(document.getElementById("map"));
  map.setCenter(new GLatLng(18.4419, 73.1419), 8);
  map.addControl(new GLargeMapControl());
  map.addControl(new GScaleControl());

  GEvent.addListener(map, "click", function(marker, point) {
   if (marker) {
   } else {
    var marker = new GMarker(point);
    map.addOverlay(marker);
    var lat = point.y;
    var lng = point.x;

    marker.openInfoWindowHtml("Latitude:"+lat+"<br/>Longitude:"+lng);
   }
  });
      }
}

Code language: JavaScript (javascript)

Online Demo

Click here. There are thousands of things that you can do with these api’s. I will try to post articles on how one can combine google maps with JSP/J2EE/Struts/JSON etc and create a simple but useful application.

View Comments

  • in Latitude/Longitude tracing demo
    change getElementById("map") to (document.getElementById("map_canvas"));

  • Hi,

    Can any one tell me how can i integrate java with google api.
    are there any references for this problem.

  • hi guys,
    I need a tutorial for this kind of application:
    - an app that gets my location and shows it with a marker on Google map.
    - this app should have a button and when I click on it:
    It select from my database nearest restaurants (within any range, maybe 1 miles) and show them with markers on the map.
    =>of course restaurants are stored in the database with their names and coordinates (latitude & longitude).

    If anyone ever seen any tutorial to do such an app, please tell me.
    Thx

Leave a Comment
Share
Published by
Viral Patel
Tags: google google maps Web 2.0
16 years ago

Recent Posts

  • Java

Java URL Encoder/Decoder Example

Java URL Encoder/Decoder Example - In this tutorial we will see how to URL encode/decode…

4 years ago
  • General

How to Show Multiple Examples in OpenAPI Spec

Show Multiple Examples in OpenAPI - OpenAPI (aka Swagger) Specifications has become a defecto standard…

4 years ago
  • General

How to Run Local WordPress using Docker

Local WordPress using Docker - Running a local WordPress development environment is crucial for testing…

4 years ago
  • Java

Create and Validate JWT Token in Java using JJWT

1. JWT Token Overview JSON Web Token (JWT) is an open standard defines a compact…

4 years ago
  • Spring Boot

Spring Boot GraphQL Subscription Realtime API

GraphQL Subscription provides a great way of building real-time API. In this tutorial we will…

5 years ago
  • Spring Boot

Spring Boot DynamoDB Integration Test using Testcontainers

1. Overview Spring Boot Webflux DynamoDB Integration tests - In this tutorial we will see…

5 years ago