Google Maps in je website

Auteur: ArndJan - 17 april 2007 - 07:56 - Gekeurd door: Ibrahim - Hits: 19042 - Aantal punten: 2.00 (2 stemmen)

Als je een route kaartje van google maps in je website wilt is dit al mogelijk. Ook kun je pointers plaatsen en zo zien mensen wat je bedoelt.

Hieronder staat 1 voorbeeldje.

LET OP! om de code te laten werken moet je eerst een google API key aanvragen.
Hoe doe je dat ga naar: http://www.google.com/apis/maps/signup.html vul je url 1 en ga accoord met de voorwaarden en je krijgt een API key. deze moet je in je javascript aanpassen vanuit het voorbeeld.

Code:

php code - Bekijk de code zonder highlighting - Klap code in

                <html>
  <head>
    <title>Google Maps</title>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAPObdNnt7Azi_Xf4_PvbXBBR_gbQLUfxhZ77AvpyhKCDAi1vpdRSzWKL5a0K-r_O1X2TKfaJD1fugHw"
      type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[
    function load() 
    {
      if (GBrowserIsCompatible()) 
      {
        var map = new GMap2(document.getElementById("map"));
        map.setCenter(new GLatLng(37.4419, -122.1419), 13);
      }
    }
    //]]>
    </script>
  </head>
  <body onload="load()" onunload="GUnload()">
    <div id="map" style="width: 500px; height: 300px"></div>
  </body>
</html>

            
<html>
  <head>
    <title>Google Maps</title>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAPObdNnt7Azi_Xf4_PvbXBBR_gbQLUfxhZ77AvpyhKCDAi1vpdRSzWKL5a0K-r_O1X2TKfaJD1fugHw"
      type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[
    function load() 
    {
      if (GBrowserIsCompatible()) 
      {
        var map = new GMap2(document.getElementById("map"));
        map.setCenter(new GLatLng(37.4419, -122.1419), 13);
      }
    }
    //]]>
    </script>
  </head>
  <body onload="load()" onunload="GUnload()">
    <div id="map" style="width: 500px; height: 300px"></div>
  </body>
</html>
 

De div met de id map is de kaart hierbij kun je de breete en de hoogte aanpassen.

Meer opties:

php code - Bekijk de code zonder highlighting - Klap code in

                <html>
  <head>
    <title>Google Maps</title>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAPObdNnt7Azi_Xf4_PvbXBBR_gbQLUfxhZ77AvpyhKCDAi1vpdRSzWKL5a0K-r_O1X2TKfaJD1fugHw"
      type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[
    function load() 
    {
      if (GBrowserIsCompatible()) 
      {
        var map = new GMap2(document.getElementById("map"));
        map.setCenter(new GLatLng(37.4419, -122.1419), 13);
        map.addControl(new GSmallMapControl());
        map.addControl(new GMapTypeControl());
      }
    }
    //]]>
    </script>
  </head>
  <body onload="load()" onunload="GUnload()">
    <div id="map" style="width: 500px; height: 300px"></div>
  </body>
</html>

            
<html>
  <head>
    <title>Google Maps</title>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAPObdNnt7Azi_Xf4_PvbXBBR_gbQLUfxhZ77AvpyhKCDAi1vpdRSzWKL5a0K-r_O1X2TKfaJD1fugHw"
      type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[
    function load() 
    {
      if (GBrowserIsCompatible()) 
      {
        var map = new GMap2(document.getElementById("map"));
        map.setCenter(new GLatLng(37.4419, -122.1419), 13);
        map.addControl(new GSmallMapControl());
        map.addControl(new GMapTypeControl());
      }
    }
    //]]>
    </script>
  </head>
  <body onload="load()" onunload="GUnload()">
    <div id="map" style="width: 500px; height: 300px"></div>
  </body>
</html>
 

Om de map op een juiste plaats in te stellen moet je deze parameter aanpassen:
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
GLatLng is de coordinatie van de werld. En de 13 is het zoom level.

Alle opties: http://www.google.com/apis/maps/documentation/

Download code (.txt)

Stemmen

Niet ingelogd.

Reacties

Post een reactie

Lees de reacties (9)