Please note that ExpatTech is close for the Christmas and New Year holidays. We will re-open on 2nd January 2024.

ExpatTech Techblog

Pető Zsolt 2008.10.29. 13:18

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

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"]
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!