Een Google Map met bedrijfslogo en routeplanner

Joor Loohuis, 7 juni 2009, 17541 views.

Een Google Map is een aardig attribuut voor op een bedrijfswebsite. In een oogopslag is te zien waar je gevestigd bent. Een mogelijkheid voor een potentiële klant om meteen een routebeschrijving te krijgen is daarbij een hele nuttige toevoeging. Het bedrijfslogo gebruiken om de locatie aan te geven maakt het helemaal af. Dit is erg eenvoudig op te zetten, zoals in dit artikeltje blijkt.

Tags: , , , , ,

De meeste bedrijfswebsites hebben bij hun contactgegevens wel een kaartje staan waarop aangegeven is waar het bedrijf te vinden is. Maar om deze echt bruikbaar te maken voor dit doel is het natuurlijk heel mooi als de bezoeker ook routegegevens op maat kan krijgen. Met Google Maps blijkt dat eigenlijk heel eenvoudig te zijn. Om het helemaal af te maken moet het simpele markertje dat standaard wordt gebruikt worden vervangen door een afbeelding met wat meer stijl, bijvoorbeeld op basis van het bedrijfslogo. Met een beetje kennis van HTML, JavaScript en CSS is dit alles weinig werk, zoals uit dit artikel blijkt.

Google Maps key

Het eerste dat moet gebeuren, is het aanvragen van een 'Google API key', als je die nog niet hebt voor je domein. Dat kost niets, maar die key is wel nodig om een Google Map op een site te zetten. De key vraag je aan op de Google site bij de Google Maps API documentatie. De informatie die erbij wordt gegeven kan je grotendeels negeren. Lees de voorwaarden echter wel, mocht je die nog niet eerder hebben gelezen. Het gaat ons verder om de key. Sla die voor de zekerheid op. Verder wordt die in de header gezet van de HTML pagina waar de Google Map op komt te staan:

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

Uiteraard moet hier 'KEY' worden vervangen door de key die Google heeft uitgereikt, een vrij lange reeks karakters. Als later bij het laden van de pagina een foutmelding wordt getoond dat er iets mis is met de key, ga dan na of er niets mis is in deze regel.

HTML

De HTML die we nodig hebben voor het opzetten van de kaart en de routeplanner is eenvoudig:

<div id="gmap" class="geo" title="52.0938091,5.0918734"></div>
<h2>Plan uw route</h2>
<p>
  <form id="routeform">
    Uw vertrekpunt (plaats of postcode):
    <input type="hidden" value="Loco@52.0938091,5.0918734" name="routeto" id="routeto"/>
    <input type="text" name="routefrom" id="routefrom"/>
    <input type="submit" value="toon route"/>
  </form>
</p>
<div id="gdirections"></div>

Dit stukje HTML bestaat eigenlijk uit drie delen:

  • Een div, hier met id 'gmap' gaat de feitelijke kaart bevatten. We zetten in het title attribuut de coördinaten van de locatie die we op de kaart willen tonen. Er zijn allerlei manieren om die te vinden. We hebben eerder al een eenvoudige manier beschreven om Google Maps te gebruiken om coördinaten van een punt te vinden.
  • Er moet een formulier komen om de bezoeker de mogelijkheid te geven een beginpunt van de route in te voeren. Google Maps heeft natuurlijk ook een eindpunt nodig om een route te bepalen, en daarvoor gebruiken we de coördinaten die we ook voor de kaart gebruiken. Een esthetisch aardigheidje is toe te voegen door de naam van de locatie ook op te nemen in het 'routeto' veld, zoals hier ook is gedaan.
  • Als laatste is er een lege div nodig waar route-instructies worden weergegeven als die er zijn, hier met id 'gdirections'.

CSS

In feite regelt de Google API zelf al vrijwel alles wat betreft de weergave van de kaart en de route-instructies. We moeten er wel voor zorgen dat het element dat de kaart bevat afmetingen heeft. Voor de rest zijn er uiteraard allerlei design truukjes toe te passen, maar dat laten we aan de ontwerpers over.

 #gmap {
    height:360px;
    width:480px;
}
 #gdirections {
    width:480px;
}

Marker

Om een aangepaste marker op de kaart te tonen in plaats van de standaard ballonnetjes van Google Maps moet er een geschikt plaatje worden gemaakt. Dat is vrij eenvoudig te doen in een toepassing als PhotoShop of de Gimp, maar er zijn wel een paar randwoorwaarden. Het beste maak je de afbeelding in PNG formaat, met een transparante achtergrond. De afmetingen mag je zelf bepalen, zolang het geheel maar in de kaart past. Je kan dus iets doen met het bedrijfslogo, of met een informatief tekstballonnetje in de bedrijfskleuren. De afbeelding heeft wel een 'ankerpunt' nodig, zodat duidelijk is waar op de kaart het naartoe wijst. Maak een notitie van de pixelcoördinaten van het ankerpunt ten opzichte van de linkerbovenhoek van de afbeelding, want die heb je nodig. Als je de afbeelding een 'dropshadow' geeft maak je het effect op de kaart helemaal af.

JavaScript

// directions.js: Google Map with travel directions
document.observe('dom:loaded', function() {new GoogleMap();});
var GoogleMap = Class.create({
    initialize: function(el)
    {
        // Google map
        if ($('gmap'))
            this.loadMap();
    },
    // load Google map
    loadMap: function()
    {
        if (GBrowserIsCompatible()) {
            document.observe('unload', GUnload, false);
            // coordinates
            var coords = $('gmap').title.split(',');
            var point = new GLatLng(parseFloat(coords[0]), parseFloat(coords[1]));
            // display map
            var map = new GMap2($('gmap'));
            map.addControl(new GSmallMapControl());
            map.addControl(new GMapTypeControl());
            map.enableScrollWheelZoom();
            map.setCenter(point, 15);
            // add marker
            var myIcon = new GIcon();
            myIcon.image = "/images/mymarker.png";
            myIcon.iconSize = new GSize(69, 49);
            myIcon.iconAnchor = new GPoint(9, 48);
            map.addOverlay(new GMarker(point, myIcon));
            // add directions
            var directions = new GDirections(map, $('gdirections'));
            $('routeform').observe('submit', function(e)
            {
                var elm = Event.element(e);
                directions.load('from: ' 
                    + elm.routefrom.value.replace(/(d{4})W+([A-Za-z]{2})/, "$1$2")
                    + ' to: ' + elm.routeto.value, {locale: 'nl_NL'});
                Event.stop(e);
            });
        }
    }
});

Er zijn een paar puntjes die moeten worden aangepast om de marker goed te krijgen: de naam van het bestand (myIcon.image), de afmetingen van de afbeelding (myIcon.iconSize) en de coördinaten van het ankerpunt (myIcon.iconAnchor). Om alles werkend te krijgen hoeft alleen nog de JavaScript in de pagina geladen te worden in de pagina waar de kaart in wordt getoond:

  <script src="/js/prototype.js" type="text/javascript"></script>
  <script src="/js/directions.js" type="text/javascript"></script>

Deze regels komen uiteraard ook in de header van de pagina, direct na de regel waarmee de Google Maps API geladen wordt. Het eindresultaat is een kaartje met een aangepaste locatie marker en de mogelijkheid voor potentiële klanten om een route te laten plannen. Een voorbeeld hiervan is te zien op de contactpagina van de HPS Industrial website.

Creative Commons License Op dit werk is een Creative Commons Licentie van toepassing.
Social networking: Tweet dit artikel op Twitter Geef dit artikel door op LinkedIn Bookmark dit artikel op Google Bookmark dit artikel op Yahoo! Bookmark dit artikel op Technorati Bookmark dit artikel op Delicious Deel dit artikel op Facebook Digg dit artikel op Digg Zend dit artikel naar to Reddit Geef dit artikel een duim omhoog op StumbleUpon Zend dit artikel naar Furl

Talkback

reageer op dit artikel

Re: Een Google Map met bedrijfslogo en routeplanner (patrick, 2009-07-09 13:52 CEST)
Ik krijg de kaart niet te zien in de div waar hij moet komen, het blijft een leeg wit vlak
Re: Een Google Map met bedrijfslogo en routeplanner (Joor Loohuis, 2009-07-14 14:07 CEST)
> Ik krijg de kaart niet te zien in de div waar hij moet komen, het
> blijft een leeg wit vlak

Er zijn verschillende redenen waarom zoiets kan gebeuren. Klopt de key? Krijg je een melding over een JavaScript fout?

Kan je anders een URL posten? Niets lost een probleem sneller op dan het posten op het Internet ;)
Re: Een Google Map met bedrijfslogo en routeplanner (wim, 2009-07-15 22:52 CEST)
wat staat er dan in prototype.js etc?

zou je misschien de volledige code eens kunnen posten in zip-formaat ofzo?

greetz
Re: Een Google Map met bedrijfslogo en routeplanner (Joor Loohuis, 2009-07-17 18:04 CEST)
> wat staat er dan in prototype.js etc?

Prototype is een JavaScript library. Downloads en documentatie vind je op http://www.prototypejs.org/.

> zou je misschien de volledige code eens kunnen posten in
> zip-formaat ofzo?

De JavaScript code die je in het artikel ziet is de hele code :)
Een werkend voorbeeld vind je dus op de website van HPS die ook in het artikel gelinkt is.

Als je meer informatie nodig hebt kan je me bereiken via de contactpagina.

Re: Een Google Map met bedrijfslogo en routeplanner (Stephan, 2009-08-15 01:54 CEST)
Hallo,

Leuke tutorial

Maar ik heb een vraagje. Is het ook mogelijk om de eindpunt marker ("B") weg te halen? Want nu staan er eigenlijk 2 markers over elkaar. En dat is eigenlijk niet gewenst.

Ook ben ik dit aan het maken maar dan met jquery. Die gebruikte ik namelijk al in mijn site.
Re: Een Google Map met bedrijfslogo en routeplanner (Joor Loohuis, 2009-08-20 14:47 CEST)
> Maar ik heb een vraagje. Is het ook mogelijk om de eindpunt marker
> ("B") weg te halen? Want nu staan er eigenlijk 2 markers
> over elkaar. En dat is eigenlijk niet gewenst.

Dat is een goed punt, en de enige manier die ik zo snel kan bedenken is eigenlijk niet helemaal netjes. Je kan direct na het directions object de volgende event handler toevoegen, die wordt getriggerd als de route is toegevoegd aan de kaart.

GEvent.addListener(directions, 'addoverlay', function() {
var last = directions.getMarker(directions.getNumRoutes());
map.removeOverlay(last);
});

Wat hier gebeurt is dat we de marker opvragen die hoort bij het laatste (en waarschijnlijk enige) route segment, en die vervolgens verwijderen. Het nadeel is dat de marker eerst wordt geplaatst, en vervolgens weer wordt verwijderd, wat storende effecten met zich mee kan brengen. Het is uiteraard beter om de marker kwijt te raken voordat die wordt getoond, maar de load event op de directions is kennelijk nog te vroeg.

Ik houd me aanbevolen voor elegantere oplossingen ;)

> Ook ben ik dit aan het maken maar dan met jquery. Die gebruikte ik
> namelijk al in mijn site.

Uiteraard moet je altijd de middelen gebruiken die je het beste uitkomen. Het zou niet zo moeilijk moeten zijn om de code die de kaart controleert los te peuteren van de rest.
Re: Een Google Map met bedrijfslogo en routeplanner (Martijn, 2010-04-02 12:57 CEST)
Ik ben helemaal blij met deze oplossing!
Het enige wat me niet lukt is om 1 stap uit te zoomen als de route op de kaart getoond wordt.
Heeft iemand een tip voor me hoe dit te doen is?
Re: Een Google Map met bedrijfslogo en routeplanner (Joor Loohuis, 2010-04-22 19:28 CEST)
> Ik ben helemaal blij met deze oplossing!
> Het enige wat me niet lukt is om 1 stap uit te zoomen als de route
> op de kaart getoond wordt.
> Heeft iemand een tip voor me hoe dit te doen is?

Een suggestie (uiteraard ongetest): de GDirections class heeft een addOverlay event, dat wordt getriggerd als de route wordt weergegeven. Daarmee kan je dus een stukje JavaScript laten uitvoeren op het juiste moment. Als je dus een event handler aan het directions object hangt en
daarin de zoomOut methode van het map object aanroept, zou de kaart een stap moeten uitzoomen op het moment dat de route wordt getoond. Bonuspunten voor het vloeiend laten uitzoomen ;)
Re: Een Google Map met bedrijfslogo en routeplanner (Daniella, 2010-04-21 14:48 CEST)
Allereerst: bedankt voor de tutorial!

Helaas heb ik een probleem. Ik krijg de kaart niet te zien; in plaats daarvan heb ik een leeg wit vlak. De key klopt absoluut. Een foutmelding krijg ik niet. Wanneer ik een postcode invoer en op "Plan Route" klik, herlaadt de pagina maar gebeurt er verder niets.

Ik zou het heel fijn vinden als iemand me zou kunnen helpen!
Re: Een Google Map met bedrijfslogo en routeplanner (Sven, 2010-10-05 10:18 CEST)
> Allereerst: bedankt voor de tutorial!
>
> Helaas heb ik een probleem. Ik krijg de kaart niet te zien; in
> plaats daarvan heb ik een leeg wit vlak. De key klopt absoluut.
> Een foutmelding krijg ik niet. Wanneer ik een postcode invoer en
> op "Plan Route" klik, herlaadt de pagina maar gebeurt er
> verder niets.
>
> Ik zou het heel fijn vinden als iemand me zou kunnen helpen!

Heb je prototype.js + directions.js goed geüpload / gelinkt?
Re: Een Google Map met bedrijfslogo en routeplanner (PH-MJS, 2010-05-26 16:06 CEST)
Ontzettende handige handleiding!
Ik kom alleen even niet uit het volgende:
$('routeform').observe('submit', function(e)
{
var elm = Event.element(e);
directions.load('from: '
+ elm.routefrom.value.replace(/(\d{4})\W+([A-Za-z]{2})/, "$1$2")
+ ' to: ' + elm.routeto.value, {locale: 'nl_NL'});
Event.stop(e);
});

Ik gebruik JQuery in plaats van prototype, dus dat stukje moet ik nog even omschrijven. Iemand enig idee hoe de code eruit komt te zien?

Alvast bedankt!
Re: Een Google Map met bedrijfslogo en routeplanner (Joor Loohuis, 2010-05-27 20:04 CEST)
> Ik kom alleen even niet uit het volgende:
> $('routeform').observe('submit', function(e)
> {
> var elm = Event.element(e);
> directions.load('from: '
> +
> elm.routefrom.value.replace(/(\d{4})\W+([A-Za-z]{2})/,
> "$1$2")
> + ' to: ' + elm.routeto.value, {locale:
> 'nl_NL'});
> Event.stop(e);
> });
>
> Ik gebruik JQuery in plaats van prototype, dus dat stukje moet ik
> nog even omschrijven. Iemand enig idee hoe de code eruit komt te
> zien?

Ik heb de jQuery code niet direct paraat, maar om de code wat toe te lichten, er wordt een submit handler op het route formuliertje geplaatst, waarin de Google Maps API call naar de load() methode van het directions object wordt uitgevoerd. Vervolgens wordt de sumbit van het formulier gestopt, want het directions object zorgt voor het weergeven van de routegegevens. Meer over die methode vindt je op http://code.google.com/intl/nl/apis/maps/documentation/javascript/v2/reference.html#GDirections.load

Voor de load() methode wordt de query samengesteld uit een begin- en een eindpunt. Beide worden uit het formulier gehaald. De 'routefrom' input is door de gebruiker ingevuld, en daar kan een postcode in staan. Omdat Google Maps die zonder spatie wil hebben wordt er een regular expression vervanging op gedaan. Die replace() methode is gewoon deel van de standaard JavaScript API.
Re: Een Google Map met bedrijfslogo en routeplanner (PH-MJS, 2010-05-31 12:56 CEST)
> > Ik kom alleen even niet uit het volgende:
> > $('routeform').observe('submit', function(e)
> > {
> > var elm = Event.element(e);
> > directions.load('from: '
> > +
> > elm.routefrom.value.replace(/(\d{4})\W+([A-Za-z]{2})/,
> > "$1$2")
> > + ' to: ' + elm.routeto.value, {locale:
> > 'nl_NL'});
> > Event.stop(e);
> > });
> >
> > Ik gebruik JQuery in plaats van prototype, dus dat stukje moet ik
> > nog even omschrijven. Iemand enig idee hoe de code eruit komt te
> > zien?
>
> Ik heb de jQuery code niet direct paraat, maar om de code wat toe
> te lichten, er wordt een submit handler op het route formuliertje
> geplaatst, waarin de Google Maps API call naar de load() methode
> van het directions object wordt uitgevoerd. Vervolgens wordt de
> sumbit van het formulier gestopt, want het directions object zorgt
> voor het weergeven van de routegegevens. Meer over die methode
> vindt je op
> http://code.google.com/intl/nl/apis/maps/documentation/javascript/v2/reference.html#GDirections.load
>
> Voor de load() methode wordt de query samengesteld uit een begin-
> en een eindpunt. Beide worden uit het formulier gehaald. De
> 'routefrom' input is door de gebruiker ingevuld, en daar kan een
> postcode in staan. Omdat Google Maps die zonder spatie wil hebben
> wordt er een regular expression vervanging op gedaan. Die
> replace() methode is gewoon deel van de standaard JavaScript API.
>

Heel hartelijk bedankt voor je antwoord. Samen met jouw antwoord en een ander gevonden voorbeeld op internet heb ik een versie gebouwd die framework onafhankelijk is
Re: Een Google Map met bedrijfslogo en routeplanner (Ron, 2010-06-23 01:13 CEST)
> > > Ik kom alleen even niet uit het volgende:
> > > $('routeform').observe('submit', function(e)
> > > {
> > > var elm = Event.element(e);
> > > directions.load('from: '
> > > +
> > > elm.routefrom.value.replace(/(\d{4})\W+([A-Za-z]{2})/,
> > > "$1$2")
> > > + ' to: ' + elm.routeto.value, {locale:
> > > 'nl_NL'});
> > > Event.stop(e);
> > > });
> > >
> > > Ik gebruik JQuery in plaats van prototype, dus dat stukje moet ik
> > > nog even omschrijven. Iemand enig idee hoe de code eruit komt te
> > > zien?
> >
> > Ik heb de jQuery code niet direct paraat, maar om de code wat toe
> > te lichten, er wordt een submit handler op het route formuliertje
> > geplaatst, waarin de Google Maps API call naar de load() methode
> > van het directions object wordt uitgevoerd. Vervolgens wordt de
> > sumbit van het formulier gestopt, want het directions object zorgt
> > voor het weergeven van de routegegevens. Meer over die methode
> > vindt je op
> > http://code.google.com/intl/nl/apis/maps/documentation/javascript/v2/reference.html#GDirections.load
> >
> > Voor de load() methode wordt de query samengesteld uit een begin-
> > en een eindpunt. Beide worden uit het formulier gehaald. De
> > 'routefrom' input is door de gebruiker ingevuld, en daar kan een
> > postcode in staan. Omdat Google Maps die zonder spatie wil hebben
> > wordt er een regular expression vervanging op gedaan. Die
> > replace() methode is gewoon deel van de standaard JavaScript API.
> >
>
> Heel hartelijk bedankt voor je antwoord. Samen met jouw antwoord en
> een ander gevonden voorbeeld op internet heb ik een versie gebouwd
> die framework onafhankelijk is
>

Zou je mij de code willen geven hoe dit met jquery werkt?
Re: Een Google Map met bedrijfslogo en routeplanner (nevain, 2010-09-22 16:32 CEST)
Mij interesseert eigenlijk enkel de routeplanner...
Het visuele krijg ik op de pagina maar zodra ik op "toon kaart" klik gebeurt er helemaal niets... coordinaten zijn ingevuld en toch doet hem niks...
Re: Een Google Map met bedrijfslogo en routeplanner (Joor Loohuis, 2010-09-22 16:46 CEST)
> Mij interesseert eigenlijk enkel de routeplanner...
> Het visuele krijg ik op de pagina maar zodra ik op "toon
> kaart" klik gebeurt er helemaal niets... coordinaten zijn
> ingevuld en toch doet hem niks...

Vermoedelijk treedt ergens een JavaScript fout op. Heb je ergens een voorbeeld online staan?
Foutmelding / afhandeling (Sven, 2010-10-05 10:16 CEST)
Bedankt voor de uitleg. Super handig en werkt goed!
Eén puntje waar ik maar geen oplossing voor kan vinden.
Als ik een adres met 'strat' ipv 'straat' invul dan vind hij (logisch) hier geen adres op.
Ik krijg dan geen foutmelding maar er gebeurt gewoon niks. Dat vind ik niet zo netjes, graag wil ik een foutmelding inbouwen. Een simpel window.alert() is eigenlijk al voldoende. Is dit mogelijk en zo ja: hoe.

Ik heb het geprobeerd met:

if (!elm.routefrom.value == G_GEO_SUCCESS) {
// Opgegeven adres is akkoord; voer de route beschrijving uit.
} else {
// Opgegeven adres niet goed / niet gevonden / of andere foutmelding
}
Re: Foutmelding / afhandeling (Joor Loohuis, 2010-10-05 11:05 CEST)
> Bedankt voor de uitleg. Super handig en werkt goed!
> Eén puntje waar ik maar geen oplossing voor kan vinden.
> Als ik een adres met 'strat' ipv 'straat' invul dan vind hij
> (logisch) hier geen adres op.
> Ik krijg dan geen foutmelding maar er gebeurt gewoon niks. Dat vind
> ik niet zo netjes, graag wil ik een foutmelding inbouwen. Een
> simpel window.alert() is eigenlijk al voldoende. Is dit mogelijk
> en zo ja: hoe.
>
> Ik heb het geprobeerd met:
>
> if (!elm.routefrom.value == G_GEO_SUCCESS) {
> // Opgegeven adres is akkoord; voer de route beschrijving uit.
> } else {
> // Opgegeven adres niet goed / niet gevonden / of andere
> foutmelding
> }

Ik heb het niet uitgeprobeerd, maar de GDirections class heeft een getStatus() methode die je zou moeten gebruiken om het resultaat van de routebepaling te berekenen. Om het in je code toe te lichten:

directions.load(...);
var success = directions.getStatus().code;
if (success == G_GEO_SUCCESS) {
// Opgegeven adres is akkoord; voer de route beschrijving uit.
} else {
// Opgegeven adres niet goed / niet gevonden / of andere
foutmelding
}

Je zou je foutmelding ook nog kunnen laten afhangen van de status, omdat de status code daar ook informatie over bevat. Zie de API documentatie van Google Maps voor de details.
Re: Foutmelding / afhandeling (Sven, 2010-10-05 13:27 CEST)
> > Bedankt voor de uitleg. Super handig en werkt goed!
> > Eén puntje waar ik maar geen oplossing voor kan vinden.
> > Als ik een adres met 'strat' ipv 'straat' invul dan vind hij
> > (logisch) hier geen adres op.
> > Ik krijg dan geen foutmelding maar er gebeurt gewoon niks. Dat vind
> > ik niet zo netjes, graag wil ik een foutmelding inbouwen. Een
> > simpel window.alert() is eigenlijk al voldoende. Is dit mogelijk
> > en zo ja: hoe.
> >
> > Ik heb het geprobeerd met:
> >
> > if (!elm.routefrom.value == G_GEO_SUCCESS) {
> > // Opgegeven adres is akkoord; voer de route beschrijving uit.
> > } else {
> > // Opgegeven adres niet goed / niet gevonden / of andere
> > foutmelding
> > }
>
> Ik heb het niet uitgeprobeerd, maar de GDirections class heeft een
> getStatus() methode die je zou moeten gebruiken om het resultaat
> van de routebepaling te berekenen. Om het in je code toe te
> lichten:
>
> directions.load(...);
> var success = directions.getStatus().code;
> if (success == G_GEO_SUCCESS) {
> // Opgegeven adres is akkoord; voer de route beschrijving uit.
> } else {
> // Opgegeven adres niet goed / niet gevonden / of andere
> foutmelding
> }
>
> Je zou je foutmelding ook nog kunnen laten afhangen van de status,
> omdat de status code daar ook informatie over bevat. Zie de API
> documentatie van Google Maps voor de details.
>

Hallo Joor,

Bedankt voor je snelle reactie! Ik heb de code die je me gaf uitgeprobeerd maar helaas zonder succes.
Ik ben de waarde van de directions.getStatus().code variabel gaan printen en ik krijg bij een adres dat klopt een "602" als resultaat. Bij een adres dat niet klopt krijg ik echter ook "602", hoe is dat mogelijk dan?

De code die ik nu heb is:

directions.load('from: '
+ elm.routefrom.value // .replace(/(\d{4})\W+([A-Za-z]{2})/, "$1$2") - Dit heb ik uitgezet omdat 'ie 't anders niet doet snapte. Dan vind ie alleen plaatsnamen maar geen specifieke adressen.
+ ' to: ' + elm.routeto.value, {locale: 'nl_NL'});
Event.stop(e);

//window.alert(directions.getStatus().code);

(if/else statement ontbreekt nu nog, maar deze zal ik later inbouwen)
Re: Een Google Map met bedrijfslogo en routeplanner (paul, 2010-12-28 12:47 CET)
het werkt fantastisch. Alleen zodra ik een route heb gekozen verschijnt niet de hele route in beeld. Dit komt doordat ik in mijn web ontwerp ervoor gekozen heb een ander formaat te kiezen voor de kaart.
Kan ik een functie toevoegen die er voor zorgt dat de route altijd wordt weergegeven in een zoom niveau -1 (minder ver ingezoomd)?
Bij het centreren van de locatie kan ik dat wel aanpassen.
Re: Een Google Map met bedrijfslogo en routeplanner (Joor Loohuis, 2010-12-28 14:51 CET)
> het werkt fantastisch. Alleen zodra ik een route heb gekozen
> verschijnt niet de hele route in beeld. Dit komt doordat ik in
> mijn web ontwerp ervoor gekozen heb een ander formaat te kiezen
> voor de kaart.
> Kan ik een functie toevoegen die er voor zorgt dat de route altijd
> wordt weergegeven in een zoom niveau -1 (minder ver ingezoomd)?
> Bij het centreren van de locatie kan ik dat wel aanpassen.

Hmm, normaal gesproken zal het zoom level en centrum van de kaart worden aangepast aan de route die wordt geladen. Dat kan je wel tegengaan door in de opties van de load() de parameter 'preserveViewport' op 'true' te zetten, maar de default is dus 'false'. Het formaat van de kaart zou daar geen invloed op mogen hebben.

Heb je misschien een URL waar de kaart te zien is?

Re: Een Google Map met bedrijfslogo en routeplanner (paul, 2011-01-05 20:56 CET)
> > het werkt fantastisch. Alleen zodra ik een route heb gekozen
> > verschijnt niet de hele route in beeld. Dit komt doordat ik in
> > mijn web ontwerp ervoor gekozen heb een ander formaat te kiezen
> > voor de kaart.
> > Kan ik een functie toevoegen die er voor zorgt dat de route altijd
> > wordt weergegeven in een zoom niveau -1 (minder ver ingezoomd)?
> > Bij het centreren van de locatie kan ik dat wel aanpassen.
>
> Hmm, normaal gesproken zal het zoom level en centrum van de kaart
> worden aangepast aan de route die wordt geladen. Dat kan je wel
> tegengaan door in de opties van de load() de parameter
> 'preserveViewport' op 'true' te zetten, maar de default is dus
> 'false'. Het formaat van de kaart zou daar geen invloed op mogen
> hebben.
>
> Heb je misschien een URL waar de kaart te zien is?
>
>
http://www.handboekbinderij-trouw.nl/route.html
toets bijvoorbeeld als vertrekpunt leeuwarden in en de route is niet helemaal zichtbaar. True of false heeft inderdaad geen invloed op het zoom niveau.
Re: Een Google Map met bedrijfslogo en routeplanner (Joor Loohuis, 2011-01-05 21:41 CET)
> > > het werkt fantastisch. Alleen zodra ik een route heb gekozen
> > > verschijnt niet de hele route in beeld. Dit komt doordat ik in
> > > mijn web ontwerp ervoor gekozen heb een ander formaat te kiezen
> > > voor de kaart.
> > > Kan ik een functie toevoegen die er voor zorgt dat de route altijd
> > > wordt weergegeven in een zoom niveau -1 (minder ver ingezoomd)?
> > > Bij het centreren van de locatie kan ik dat wel aanpassen.
> >
> > Hmm, normaal gesproken zal het zoom level en centrum van de kaart
> > worden aangepast aan de route die wordt geladen. Dat kan je wel
> > tegengaan door in de opties van de load() de parameter
> > 'preserveViewport' op 'true' te zetten, maar de default is dus
> > 'false'. Het formaat van de kaart zou daar geen invloed op mogen
> > hebben.
> >
> > Heb je misschien een URL waar de kaart te zien is?
> >
> >
> http://www.handboekbinderij-trouw.nl/route.html
> toets bijvoorbeeld als vertrekpunt leeuwarden in en de route is
> niet helemaal zichtbaar. True of false heeft inderdaad geen
> invloed op het zoom niveau.

Als ik de kaart reproduceer in een testomgeving met dezelfde afmetingen, zoom en centroid, en vervolgens de route opvraag wordt de zoom correct ingesteld om de hele route te tonen. Ik vermoed dat de styling van de rest van de site een rol speelt.
Re: Een Google Map met bedrijfslogo en routeplanner (roy, 2011-06-07 20:12 CEST)
HELP-HELP

Ik heb de code exact in mijn site gebruikt.
Alles werkt perfect... behalve:

Er zijn geen markers zichtbaar en de coördinaten zijn niet aanwezig op de kaart.

Ik heb de coördinaten ingevoerd nadat ik het bedrijf heb aangemeld bij google maps.

Wat kan dit veroorzaken?
IE en FF hebben beide dit probleem

Roy
Re: Een Google Map met bedrijfslogo en routeplanner (Joor Loohuis, 2011-06-07 21:13 CEST)
> Ik heb de code exact in mijn site gebruikt.
> Alles werkt perfect... behalve:
>
> Er zijn geen markers zichtbaar en de coördinaten zijn niet
> aanwezig op de kaart.
>
> Ik heb de coördinaten ingevoerd nadat ik het bedrijf heb aangemeld
> bij google maps.
>
> Wat kan dit veroorzaken?
> IE en FF hebben beide dit probleem

Heb je een URL waar we het probleem kunnen zien?

Joor
Re: Een Google Map met bedrijfslogo en routeplanner (roy, 2011-06-07 21:24 CEST)
> > Ik heb de code exact in mijn site gebruikt.
> > Alles werkt perfect... behalve:
> >
> > Er zijn geen markers zichtbaar en de coördinaten zijn niet
> > aanwezig op de kaart.
> >
> > Ik heb de coördinaten ingevoerd nadat ik het bedrijf heb aangemeld
> > bij google maps.
> >
> > Wat kan dit veroorzaken?
> > IE en FF hebben beide dit probleem
>
> Heb je een URL waar we het probleem kunnen zien?
>
> Joor
>

www.julomawebdesign.nl/maas

bedankt.
Re: Een Google Map met bedrijfslogo en routeplanner (roy, 2011-06-07 21:26 CEST)
> > > Ik heb de code exact in mijn site gebruikt.
> > > Alles werkt perfect... behalve:
> > >
> > > Er zijn geen markers zichtbaar en de coördinaten zijn niet
> > > aanwezig op de kaart.
> > >
> > > Ik heb de coördinaten ingevoerd nadat ik het bedrijf heb aangemeld
> > > bij google maps.
> > >
> > > Wat kan dit veroorzaken?
> > > IE en FF hebben beide dit probleem
> >
> > Heb je een URL waar we het probleem kunnen zien?
> >
> > Joor
> >
>
> www.julomawebdesign.nl/maas
>
> bedankt.

"route" pagina
Re: Een Google Map met bedrijfslogo en routeplanner (Joor Loohuis, 2011-06-08 08:49 CEST)
> > > Ik heb de code exact in mijn site gebruikt.
> > > Alles werkt perfect... behalve:
> > >
> > > Er zijn geen markers zichtbaar en de coördinaten zijn niet
> > > aanwezig op de kaart.
> > >
> > > Ik heb de coördinaten ingevoerd nadat ik het bedrijf heb aangemeld
> > > bij google maps.
> > >
> > > Wat kan dit veroorzaken?
> > > IE en FF hebben beide dit probleem
> >
> > Heb je een URL waar we het probleem kunnen zien?
> >
> > Joor
> >
>
> www.julomawebdesign.nl/maas

Het plaatje dat je als marker wil gebruiken bestaat kennelijk niet. Vermoedelijk ben je vergeten dat in het script aan te passen.

Re: Een Google Map met bedrijfslogo en routeplanner (roy, 2011-06-09 20:32 CEST)
> > > > Ik heb de code exact in mijn site gebruikt.
> > > > Alles werkt perfect... behalve:
> > > >
> > > > Er zijn geen markers zichtbaar en de coördinaten zijn niet
> > > > aanwezig op de kaart.
> > > >
> > > > Ik heb de coördinaten ingevoerd nadat ik het bedrijf heb aangemeld
> > > > bij google maps.
> > > >
> > > > Wat kan dit veroorzaken?
> > > > IE en FF hebben beide dit probleem
> > >
> > > Heb je een URL waar we het probleem kunnen zien?
> > >
> > > Joor
> > >
> >
> > www.julomawebdesign.nl/maas
>
> Het plaatje dat je als marker wil gebruiken bestaat kennelijk niet.
> Vermoedelijk ben je vergeten dat in het script aan te passen.
>
>
Ja, dat klopt idd. Dat heb ik weer terug veranderd. Ook met de juiste verwijzing, werkt het niet.
Dus ja.... ik weet het verder ook niet meer.
Re: Een Google Map met bedrijfslogo en routeplanner (Joor Loohuis, 2011-06-10 07:04 CEST)
> > Het plaatje dat je als marker wil gebruiken bestaat kennelijk niet.
> > Vermoedelijk ben je vergeten dat in het script aan te passen.
> >
> >
> Ja, dat klopt idd. Dat heb ik weer terug veranderd. Ook met de
> juiste verwijzing, werkt het niet.
> Dus ja.... ik weet het verder ook niet meer.

Je script vraagt nog steeds http://www.julomawebdesign.nl/images/mymarker.png op, en dat geeft een 404. Wat is de correcte URL?
De rest van het script werkt zo te zien helemaal goed, dus ik verwacht dat als je dat aanpast het allemaal netjes gaat werken.
Re: Een Google Map met bedrijfslogo en routeplanner (roy, 2011-06-10 19:31 CEST)
> > > Het plaatje dat je als marker wil gebruiken bestaat kennelijk niet.
> > > Vermoedelijk ben je vergeten dat in het script aan te passen.
> > >
> > >
> > Ja, dat klopt idd. Dat heb ik weer terug veranderd. Ook met de
> > juiste verwijzing, werkt het niet.
> > Dus ja.... ik weet het verder ook niet meer.
>
> Je script vraagt nog steeds
> http://www.julomawebdesign.nl/images/mymarker.png op, en dat geeft
> een 404. Wat is de correcte URL?
> De rest van het script werkt zo te zien helemaal goed, dus ik
> verwacht dat als je dat aanpast het allemaal netjes gaat werken.

De fout zat idd. in de url verwijzing.
ik had in het script de url. /images/logo2.png staan maar dit moest zijn:
images/logo2.png

Bedankt dat je het script bekeken hebt.. dit heeft me in de goede richting gezet!

Niet alleen een goed script, maar ook nog een snelle en goede hulp!

Top....
Re: Een Google Map met bedrijfslogo en routeplanner (Melvnn, 2011-07-09 14:52 CEST)
Ik probeer dit ook op een website te zetten die ik aan het maken ben (ASP.NET), maar als ik in de textbox een waarde invul, word er geen route weergegeven, ook niet de directions.

Enig idee waar het aan ligt?
Re: Een Google Map met bedrijfslogo en routeplanner (Joor Loohuis, 2011-07-10 09:47 CEST)
> Ik probeer dit ook op een website te zetten die ik aan het maken
> ben (ASP.NET), maar als ik in de textbox een waarde invul, word er
> geen route weergegeven, ook niet de directions.
>
> Enig idee waar het aan ligt?

Niet zonder naar de code zelf te kijken. Heb je een URL waar we het probleem kunnen bekijken?
Re: Een Google Map met bedrijfslogo en routeplanner (Melvin, 2011-07-10 12:26 CEST)
> > Ik probeer dit ook op een website te zetten die ik aan het maken
> > ben (ASP.NET), maar als ik in de textbox een waarde invul, word er
> > geen route weergegeven, ook niet de directions.
> >
> > Enig idee waar het aan ligt?
>
> Niet zonder naar de code zelf te kijken. Heb je een URL waar we het
> probleem kunnen bekijken?

Dit is de url van de website: http://testsite.bastiaanautos.nl/Route.aspx
Re: Een Google Map met bedrijfslogo en routeplanner (Joor Loohuis, 2011-07-10 12:41 CEST)
> > > Ik probeer dit ook op een website te zetten die ik aan het maken
> > > ben (ASP.NET), maar als ik in de textbox een waarde invul, word er
> > > geen route weergegeven, ook niet de directions.
> > >
> > > Enig idee waar het aan ligt?
> >
> > Niet zonder naar de code zelf te kijken. Heb je een URL waar we het
> > probleem kunnen bekijken?
>
> Dit is de url van de website:
> http://testsite.bastiaanautos.nl/Route.aspx

Firebug is your friend ;)

Als je daarmee naar de pagina kijkt zie je twee punten:
1. er zijn wat JavaScript waarschuwingen die je waarschijnlijk even wil oplossen
2. het form element van het routeplanner deel bestaat niet in het DOM, waarschijnlijk omdat je de hele pagina in een form hebt opgenomen. Een submit gaat dus op dat form element, en verder wordt de event handler niet opgezet omdat het routeplanner form element niet bestaat.

Re: Een Google Map met bedrijfslogo en routeplanner (Roy, 2011-10-23 22:12 CEST)
Voor diegene die de directions met jQuery werkend willen krijgen is dit de oplossing, vervang het directions gedeelte met;

var directions = new GDirections(map, $('#gdirections').get(0));
$('#routeform').submit(function()
{
directions.load('from: '
+ $('#routefrom').get(0).value.replace(/(d{4})W+([A-Za-z]{2})/, "$1$2")
+ ' to: ' + $('#routeto').get(0).value, {locale: 'nl_NL'});
return false;
});

Re: Een Google Map met bedrijfslogo en routeplanner (Bob, 2012-01-03 20:29 CET)
Hier zat ik naar te zoeken, bedankt

Bob