Google Maps API V3: Extra aanpassingen

In de laatste tutorial uit deze reeks wil ik uitleggen hoe je de kaart naar je eigen wil kan aanpassen. Maar ook ga ik even in op het zelf maken van mooie goede markers.

Standaard kaart

Voordat we gaan kijken wat we allemaal kunnen wijzigen gaan we eerst kijken naar wat er allemaal op een basis kaart van Google Maps zit:

kaart Google Maps

1) pan Control. Hiermee kun je slepen over de kaart.
2) streetView Control. Dit poppetje kun je slepen naar een straat om in de streetview te gaan.
3) zoom Control. Hiermee kun je in- en uitzoomen.
4) marker. Deze geeft een plaats op de kaart aan.
5) info window. In tutorial Google Maps API V3: InfoWindows staat hier alles over uitgelegd.
6) mapType Control. Hiermee kan je kiezen tussen kaart(/terrein) of Satteliet(/Hybrid)
7) scale Control, deze staat standaard uit. Wanneer deze aanstaat is hij linksonderin.

Map Controls aanpassen

Om Map Controls aan of uit te zetten gebruiken we de booleans in JavaScript: true of false. True is waar in het Nederlands en false is onwaar. Zoals je wel kan verwachten is true voor de control aanzetten en false om de control uitzetten. Dit doen we in het option gedeelte van het aanmaken van de map, in ons voorbeeld is dat dus de variabele optionMap.

Je typt de naam van de control en daarachter aan meteen Control. Bijv: panControl of mapTypeControl. Daarachter doe je een : (zoals we gewent zijn) en dan true of false. We willen nu de streetview control uitzetten. Dat doen we met deze code:

var optionMap = {
  center: centerMap,
  zoom: 9,
  MapTypeId: google.maps.MapTypeId.ROADMAP,
  streetViewControle: false
};

Zodra we de een na laatste regel hiervan toevoegen aan onze variabele optionMap krijgen we geen streetview control meer te zien.

Naast het aan of uitzetten kunnen we ook wat opties instellen. 1 van die opties is de stijl. Bij zoomControl bijv. kunnen we kiezen uit 3 soorten:
– DEFAULT, deze gaat automatisch op groot bij een beeldscherm en bij een klein scherm op klein.
– LAGRE: Een + boven en een – onder, met daartussen een smalle balk
– SMALL: Alleen de + en –

De options van een control kun je instellen door achter zoomControl ook nog Options te zetten. Vervolgens typ je {} en daartussen staan de opties:

zoomControlOptions: {
  style:
}

Om van style te veranderen maken we gebruik van de functie die bij zoomControl hoort: zoomControlStyle. De functie is dus

google.maps.zoomControleStyle.STYLETYPE:
zoomControlOptions: {
  style: google.maps.zoomControlStyle.SMALL
}

Nu staat hij standaard op small.
Zoiets kan je ook voor andere controls doen.

Naast de style is er nog een sterke optie: De positie. We kunnen alleen elementen een andere plaats geven. Dit gaat volgens dit schema:

kaart voorbeelden

Als je 2 controls TOP_LEFT meegeeft komen ze standaard onder elkaar te staan. Laten we nu de controls omkeren, panControl en zoomControl gaan naar links en mapTypeControl naar rechts. Dit doen we door de naam position te gebruiken. Hierna maak je gebruik van de google maps functie ControlPosition:

var optionMap = {
  center: centerMap,
  zoom: 9,
  MapTypeId: google.maps.MapTypeId.ROADMAP,
  streetViewControl: false,
  panControlOptions: {
    position: google.maps.ControlPosition.RIGHT_TOP
  },
  zoomControlOptions: {
    style: google.maps.ZoomControlStyle.LARGE,
    position: google.maps.ControlPosition.RIGHT_TOP
  },

  mapTypeControlOptions: {
    position: google.maps.ControlPosition.LEFT_TOP
  }
};

We zien nu dat de controls zijn omgedraaid.

Zelfgemaakte markers

Je kan ook je eigen marker maken. Dit doe je door een afbeelding te maken van het object dat jij wilt, in dit geval neem ik het logo van HTML-Site.

De functies die je hiervoor gebruikt om schaduw en precies positie te gebruiken zijn te ingewikkeld voor deze tutorialreeks. Vandaar dat ik je nu verwijs naar een site die dit zelf doet: http://www.powerhut.co.uk/googlemaps/custom_markers.php

Bij deze site voeg je rechtsboven jou afbeelding in. Dan kies je het punt waar de marker de kaart moet raken. Nu gaat hij de marker maken en krijg je een zip bestandje. Hierin zit:
– image.png – Dit is de afbeelding die al marker gebruikt wordt
– shadow.png – Deze schaduw hoort bij de afbeelding
– sample-code.text – Dit is de code die je moet invoegen in je JavaScript file.

Wat je nu moet doen om deze image te krijgen bij een marker deze functies invoegen:
icon: image,
shadow: shadow,
shape: shape
Met icon verwijs je naar de variabele image, deze staat in sample-code.text. Met shadow verwijs je naar de variabele van de schaduw en shape is de variabele shape, hierin staan de gegevens van de grote van de image (zodat google weet waar er geklikt kan worden).

Hoe nu verder?

Dit is de laatste tutorial van deze reeks. De basis heb je nu, nu kan je vooral veel gaan oefenen en proberen. Google heeft zelf een uitgebreid overzicht van alle functies en opties, dit is helaas in het Engels, deze is hier te vinden: http://code.google.com/intl/nl-NL/apis/maps/documentation/javascript/reference.html
Hier vind je ook tutorials van Google over de API.

De totale code voor deze tutorial:

var optionMap = {
  center: centerMap,
  zoom: 9,
  MapTypeId: google.maps.MapTypeId.ROADMAP,
  streetViewControl: false,
  panControlOptions: {
    position: google.maps.ControlPosition.RIGHT_TOP
  },
  zoomControlOptions: {
    style: google.maps.ZoomControlStyle.LARGE,
    position: google.maps.ControlPosition.RIGHT_TOP
  },
  mapTypeControlOptions: {
    position: google.maps.ControlPosition.LEFT_TOP
  }
};
var image = new google.maps.MarkerImage(
	'image.png',
	new google.maps.Size(48,48),
	new google.maps.Point(0,0),
	new google.maps.Point(0,48)
);
var shadow = new google.maps.MarkerImage(
	'shadow.png',
	new google.maps.Size(76,48),
	new google.maps.Point(0,0),
	new google.maps.Point(0,48)
);
var shape = {
	coord: [30,8,31,9,32,10,33,11,34,12,35,13,36,14,36,15,37,16,38,17,39,18,40,19,40,20,40,21,41,22,41,23,40,24,40,25,40,26,40,27,39,28,39,29,38,30,37,31,36,32,33,33,31,34,28,35,26,36,23,37,21,38,18,39,13,39,11,38,9,37,8,36,8,35,7,34,7,33,7,32,7,31,7,30,7,29,7,28,7,27,7,26,7,25,7,24,7,23,7,22,6,21,6,20,7,19,7,18,8,17,8,16,9,15,10,14,12,13,14,12,17,11,19,10,21,9,24,8,30,8],
	type: 'poly'
};
marker = new google.maps.Marker({
  position: positieMarker,
  map: map,
  title: titleMarker,
  icon: image,
  shadow: shadow,
  shape: shape
});

Voorbeeld: Link

Een reactie achterlaten

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *