ExpatTech Techblog

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!