Main Tutorials

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 Author

author image
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

Subscribe
Notify of
14 Comments
Most Voted
Newest Oldest
Inline Feedbacks
View all comments
satta matka guessing forum
6 years ago

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.

Yummy2013
10 years ago

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

Prabhat
10 years ago

Thanks a Lot Yaar.

Your post are Just amazing.

Thanks Again
Prabhat

Tarun
10 years ago

Thank you for another excellent post.

Samir
10 years ago

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.

Avanish
10 years ago

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

Jay Patel
11 years ago

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

google
11 years ago

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..

seo co ban
11 years ago

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.

Damian
12 years ago

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

Rahi Akela
12 years ago

Hi Mr. Yong,

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

Rahi Akela

imran
10 years ago
Reply to  mkyong

we are waiting for more Google Maps tutorials

parth Kachhadia
11 years ago
Reply to  mkyong

hey thanks for very good example of google maps.

thanks & Regards

Parth Kachhadia