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>
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.
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>
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()">
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.
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
Thanks a Lot Yaar.
Your post are Just amazing.
Thanks Again
Prabhat
Thank you for another excellent post.
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.
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
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
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..
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.
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
Hi Mr. Yong,
Thanks for good example of GoogleMap.That’s nice example that you have provided.
Rahi Akela
Thanks for your kind words, a series of Google Maps tutorials are pending, hope can get it done soon.
we are waiting for more Google Maps tutorials
hey thanks for very good example of google maps.
thanks & Regards
Parth Kachhadia