ExpatTech TechBlog

<< previous entries

Zsolt Pető

programmer

How to set up a basic Google Map on your site?

2008.10.29.

Google Maps are very useful when you want to mark a place on a map. Setting up a Google map is very easy. Before you'd start to write your code, you need a Google Map Key. Here's the page where you can take this key: http://code.google.com/apis/maps/signup.html

Ok, when you have the key, do the followings steps:

1. Put this code to the <head> of your file:

<script src="http://maps.google.com/maps?file=api&v=2&key=here_comes_the_key" type="text/javascript"></script>

2. Put this code to the <head> as well:

<script language="javascript">

//<![CDATA[

function initialize() {
if (GBrowserIsCompatible()) {
    var map = new GMap2(document.getElementById("map"));
    map.setCenter(new GLatLng(46.6, 21.3), 7);

    //kontrollok hozzáadása
    map.addControl(new GScaleControl());
map.addControl(new GOverviewMapControl());
    map.addControl(new GLargeMapControl());

    //pont hozzáadása
    var point = new GLatLng(46.6, 21.3);
    var marker = new GMarker(point);

//eseménykezelés

    GEvent.addListener(marker, "mouseover", function() {
    marker.openInfoWindowHtml('html_hint');
    });
    GEvent.addListener(marker, "mouseout", function() {
    marker.closeInfoWindow();
    });
    map.addOverlay(marker);
}
}

//]]>

</script>

3. Change your <body> tag to something like this:

<body onload="initialize()" onunload="GUnload()">

4. Add this code where you want to use the map...

<div id="map" style="width:640px; height:640px"></div>

That's all!

Home