header image

How to integrate Google Maps API into your web

Posted by: | April 19, 2010 | No Comment |

Here is a code sample how to integrate Google Maps API into your own website (you can save as index.html) :


copyright (c) 2009 Google inc.

You are free to copy and use this sample.
License can be found here: http://code.google.com/apis/ajaxsearch/faq/#license

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xmlns:v=”urn:schemas-microsoft-com:vml”>
<meta http-equiv=”content-type” content=”text/html; charset=utf-8″/>
<title>Google Maps API Sample</title>
<style type=”text/css”>
@import url(“http://www.google.com/uds/css/gsearch.css”);
@import url(“http://www.google.com/uds/solutions/localsearch/gmlocalsearch.css”);
<script src=”http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=true&amp;key=ABQIAAAA-iEkqO50gh7kTVPnIV7b7xRFfPyVh0AAbiUAW8Rl1iJkm0hCFxT1fHUD31vfwmm9855PYTqeCPO_Rg” type=”text/javascript”></script>

<script src=”http://www.google.com/uds/api?file=uds.js&amp;v=1.0″ type=”text/javascript”></script>

<script src=”http://www.google.com/uds/solutions/localsearch/gmlocalsearch.js” type=”text/javascript”></script>
<script type=”text/javascript”>

function initialize() {
if (GBrowserIsCompatible()) {

// Create and Center a Map
var map = new GMap2(document.getElementById(“map_canvas”));
map.setCenter(new GLatLng(1.495027,124.840894), 15);
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());

// bind a search control to the map, suppress result list
map.addControl(new google.maps.LocalSearch(), new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(10,20)));

<body onload=”initialize()” onunload=”GUnload()” style=”font-family: Arial;border: 0 none;”>
<div id=”map_canvas” style=”width: 500px; height: 300px”></div>


If you have error with my code here, you can see original code directly in http://code.google.com/apis/ajax/playground/#localsearch ( Google code playground show many samples of using  Google API )

To show in HTML code, you can click “Edit HTML” button. All codes that will be shown are same as mine, except the API key.

For use this code on your website, you must Sign up for a Google Maps API key.

Of course, to get Google Maps API Key, you must have Gmail account first.

After you have registered, you see in JavaScript Maps API Example. There is a code that contains your own key, copy that code and replace my key with yours (see in my bold code).

Ok … That’s all. I hope you can successfully integrate Google Maps API on your own web.

For sample of mine, you can see in :

http://standy-oei.web.ugm.ac.id/ (start with Yogyakarta, Indonesia map)

And next, you can modify this code to adjust your :

– starting map

– resolution of map canvas

– etc (depends on your creativity)

I hope this code is helpfully for you to bulid your Google Maps API web.

Any comments or thanks ? you can say here … :)

under: Computer Science

Leave a response

Your response: