google maps op je site

[gebruiker35]

Ik heb google maps op m'n site gezet. Werkt perfect, maar ik wil er zo'n aanwijspijltje bij.
Al een en ander geprobeert, maar werkte niet...

 

[Tha Devil]

Wat voor pijltje bedoel je?

 

[Jarrin]

Wat voor pijltje bedoel je?

Geef eventjes een link naar je site, dan kunnen we het zien

 

[gebruiker35]

http://fietsenschuur.net/index.php?page=7
zo'n pijltje dat een locatie aanwijst.
zie google maps, en dan zoeken naar een plaats.

 

[TheM]

Ik moet eerlijk bekennen dat ik zelf nooit echt bezig ben geweest met een google maps op je eigen website. Ik heb mijn collega's er wel mee zien werken.

Zover ik weet heb je 2 opties:
Een simpele kaart hiervoor doe je het volgende:
- Ga naar http://maps.google.nl
- Typ je zoekopdracht in
- Klik op het knopje Link rechtsbovenin
- Pas hem mogelijk aan en gebruik de code
Bron: http://maps.google.nl/support/bin/answer.py?answer=72644&src=top5&lev=index

Wil je meer dingen doen, zoals bijvoorbeeld meerdere punten weergeven in de kaart. Dan moet je gaan denken aan de Google Maps API.

 

[Tha Devil]

var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
 
// Add 10 markers to the map at random locations
var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();
for (var i = 0; i < 10; i++) {
  var point = new GLatLng(southWest.lat() + latSpan * Math.random(),
        southWest.lng() + lngSpan * Math.random());
map.addOverlay(new GMarker(point));
}

Simpel voorbeeld vanuit de API
Meer info: http://code.google.com/apis/maps/documentation/overlays.html

 

[gebruiker35]

Ja, dat was ik aan het proberen geweest.
Werkt nu nog niet.
Ik had:

    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAA-Bg4Gmh8HuOybrl8fvyPBTKZuWgyU_rRMerkYkV9slE0T6xCRTBdul49Am8AvY8ELaII0pA12kwMw&sensor=true"
      type="text/javascript"></script>



    <script type="text/javascript">



    //<![CDATA[

    function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        map.setCenter(new GLatLng(51.76080, 4.15047), 16);
      }
    }


  function initialize() {
    var map = new google.maps.Map2(document.getElementById("map"));
    map.setCenter(new google.maps.LatLng(37.4419, -122.1419), 13);
  }
  google.setOnLoadCallback(initialize);

    //]]>






    </script>

 

[Tha Devil]

En waar is de code welke ik je gaf?

Die zorgt namelijk voor de zogenaamde "markers".

 

[gebruiker35]

hij gaf gewoon niets weer toen.

dus nu de vraag, hoe moet ik dat erin zetten?

 

[Tha Devil]

Zo moeilijk was het voorbeeld toch niet? Kwestie van overnemen en hij doet het

Probeer dit eens.

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAA-Bg4Gmh8HuOybrl8fvyPBTKZuWgyU_rRMerkYkV9slE0T6xCRTBdul49Am8AvY8ELaII0pA12kwMw&sensor=true" type="text/javascript"></script>



<script type="text/javascript">
function load() {
  if (GBrowserIsCompatible()) {
    var map = new GMap2(document.getElementById("map"));
     map.setCenter(new GLatLng(51.76080, 4.15047), 16);
    // Add 10 markers to the map at random locations
    var bounds = map.getBounds();
    var southWest = bounds.getSouthWest();
    var northEast = bounds.getNorthEast();
    var lngSpan = northEast.lng() - southWest.lng();
    var latSpan = northEast.lat() - southWest.lat();
    for (var i = 0; i < 10; i++) {
      var point = new GLatLng(southWest.lat() + latSpan * Math.random(),
        southWest.lng() + lngSpan * Math.random());
      map.addOverlay(new GMarker(point));
    }
  }
}
google.setOnLoadCallback(load);
</script>

Als je niets ziet dan moet je even uitzoomen om te kijken of ze niet ergens anders staan.

 

[TheM]

Eeeerm Tha Devil je vergeet wel een cruciaal iets.

De google maps api is geregged op je website!
Je moet namelijk eerst een sleutel aanvragen bij Google. Voor test mogelijkheden is er wel een algemene localhost api geloof ik.

Daarnaast tjallink heb jij de eerste optie van mij ook geprobeerd?
Dus via google maps eerst wat opzoeken.
- Klik op de knop Link.
- Klik op de knop aanpassen.
- Pas het aan naar jouw wensen.
- Kopieer de code die je krijgt bij stap 3

 

[Tha Devil]

Eeeerm Tha Devil je vergeet wel een cruciaal iets.

De google maps api is geregged op je website!
Je moet namelijk eerst een sleutel aanvragen bij Google. Voor test mogelijkheden is er wel een algemene localhost api geloof ik.

Wat staat er in de eerste regel dan?
Daarnaast wordt die sleutel gewoon gegenereerd, niets registereren.

Localhost werkt met elke sleutel wel, het geldt alleen voor online gebruik dat je een sleutel laat genereren

 

[gebruiker35]

Het werkt in ieder geval fantastisch na wat aanpassingen. (coordinaten van pijltje, en 1 pijltje) bedankt!

Die knop link begrijp ik weinig van.., tis iig opgelost!

 

[TheM]

Wat staat er in de eerste regel dan?
Daarnaast wordt die sleutel gewoon gegenereerd, niets registereren.

Localhost werkt met elke sleutel wel, het geldt alleen voor online gebruik dat je een sleutel laat genereren

Hmm nouja laatste keer dat ik de Google Maps API heb gebruikt is alweer een paar jaar geleden. En destijds moest je een key ingeven die gebonden was aan de website waarop je het plaatje wou weergeven. Deze key moest je aanvragen via de website van Google zelf. Ik wist dus wel dat er een key nodig was, alleen ik was in de beleving dat deze site specifiek was.

Maarja tijden veranderen .

 

[Tha Devil]

Begrijp mij niet verkeerd, hij is nog steeds website specifiek.
Je registreert hem alleen niet.

Hier moet je de sleutel aanvragen. Er worden echter geen gegevens van je gevraagd.

Er wordt gewoon een sleutel gegenereed aan de hand van je URL.
Google zal zelf de URL ongetwijfeld wel registreren maar hij staat niet op jouw naam.