Google Maps API hello world example

A simple hello world guide to display Google Maps on a web page, via Google Maps Javascript API v3.

In this tutorial, we show you how to display a map centered on “Malim Nawar, Malaysia” (my hometown), and use “marker (small icon)” to identify the location on the map.

Full example…


<html>
<head>
<title>Google Map Hello World Example</title>
<style type="text/css">
div#map_container{
	width:100%;
	height:350px;
}
</style>
<script type="text/javascript" 
   src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

<script type="text/javascript">
  function loadMap() {
    var latlng = new google.maps.LatLng(4.3695030, 101.1224120);
    var myOptions = {
      zoom: 4,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_container"),myOptions);
	
    var marker = new google.maps.Marker({
      position: latlng, 
      map: map, 
      title:"my hometown, Malim Nawar!"
    }); 
  
  }
</script>
</head>

<body onload="loadMap()">
<div id="map_container"></div>
</body>

</html>

See following explanation.

1. Where to display Google map

Google map is going to display on element id “map_container“.


//...
<style type="text/css">
div#map_container{
	width:600px;
	height:500px;
}
</style>

<div id="map_container"></div>
//...

2. Load Google Maps API

To use Google Maps API, you only need to include following JavaScript in your web page.


<script type="text/javascript" 
	src="http://maps.googleapis.com/maps/api/js?sensor=false">
</script>
What is sensor?
Sensor (normally, mobile phone sensor) is used to determine the user’s location.

3. Latitude and Longitude

Every location on the Earth can be represent by latitude and longitude or so called “geographic coordinates“, refer to this wiki geographic coordinate for further explanation.

Note
Personally, i don’t really understand how latitude and longitude works, put it simple, just think latitude with the y-coordinate and longitude with the x-coordinate. Would appreciate if someone explains more about it 🙂

In this example, you can find the latitude and longitude of “Malim Nawar” via this latitude and longitude finder website. Then, puts your latitude and longitude like this “var latlng = new google.maps.LatLng(Latitude, Longitude)“.


<script type="text/javascript">
  function loadMap() {
    var latlng = new google.maps.LatLng(4.3695030, 101.1224120);
    //...
  }
</script>
Geocoding
The process of convert an address into “latitude and longitude” is known as geocoding. We will provide more geocoding examples in next tutorials.

4. Configure Google Maps Options

The configurable values are self-explanatory. Refer to this reference for list of the supported Google map options.


<script type="text/javascript">
  function loadMap() {
    //...
    var myOptions = {
      zoom: 4,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    //...
  }
</script>

Display the Google map in the HTML element id named “map_container”.


function loadMap() {
    //...
    var map = new google.maps.Map(document.getElementById("map_container"),myOptions);
    //...
}
</script>

Create a marker (small icon), configure the display position and predefined message box when you mouse over on the marker.


function loadMap() {
    //...
    var marker = new google.maps.Marker({
      position: latlng, 
      map: map, 
      title:"my hometown, Malim Nawar!"
    }); 
    //...
  }
</script>

5. Load Google Maps

Final step, just load the function via body onload.


<body onload="loadMap()">

6. Result

References

  1. Google Maps API tutorial
  2. Geographic coordinate system (wiki)
  3. Website to find latitude and longitude

About the Author

author image
mkyong
Founder of Mkyong.com, love Java and open source stuff. Follow him on Twitter. If you like my tutorials, consider make a donation to these charities.

Comments

avatar
12 Comment threads
3 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
14 Comment authors
satta matka guessing forumYummy2013imranPrabhatTarun Recent comment authors
newest oldest most voted
Rahi Akela
Guest
Rahi Akela

Hi Mr. Yong,

Thanks for good example of GoogleMap.That’s nice example that you have provided.

Rahi Akela

Damian
Guest
Damian

Hey, thanks for the example, is very useful for starters like myself. Just a question, what about the API key I keep reading about ? (http://code.google.com/apis/maps/documentation/javascript/tutorial.html)

How come your code doesnt have one, but works. When am I supposed to use an API key from google?

Thanks!!

Damian

seo co ban
Guest
seo co ban

Thank you for another excellent post. The place else may anyone get that kind of information in such an ideal approach of writing? I have a presentation next week, and I’m on the search for such information.

google
Guest
google

I’m really inspired along with your writing skills as smartly as with the format to your weblog. Is that this a paid subject or did you modify it yourself? Either way keep up the nice high quality writing, it’s uncommon to see a great blog like this one today..

Jay Patel
Guest
Jay Patel

Hey, Thanks for all the tutorials.
For Web services and For the Spring3 MVC,Google API Integration.
I learn a lot from your tutorials.

Thanks and Regards,
Jay

trackback
Changing the Google map location via Java code in SWT? | Jisku.com - Developers Network

[…] the Google map location via Java code in SWT? I have been following this tutorial for creating a map browser in […]

Avanish
Guest
Avanish

hello is it possible to pass more than 1 Lat Long in to render more than 1 location .i want to show two – three locations in one time ,no need to show roots only locations .
thanks

Samir
Guest
Samir

Hi,
How can i intergrate google map api with Java,Jsp,Servlet.
As per my requirement i wil enter data on JSP (let say any shop data with street address).
And the same should appear on google map with the exact location.
So can you tell me how can i do this with java and google map api.

Tarun
Guest
Tarun

Thank you for another excellent post.

Prabhat
Guest
Prabhat

Thanks a Lot Yaar.

Your post are Just amazing.

Thanks Again
Prabhat

Yummy2013
Guest
Yummy2013

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

satta matka guessing forum
Guest
satta matka guessing forum

Your blog website provided us with useful information to execute with. Each & every recommendations of your website are awesome. Thanks a lot for talking about.