Google Maps API met placemark
Kan iemand voor mij een hele simpele placemark maken op basis van latitude en longtitude?
Heel erg bedank, op dit moment wil ik bijna mijn toetsenbord rammen!
http://gallengallrotterdam.nl/contact.php
Ik raad je in elk geval aan te beginnen met een tutorial serie over de Google Maps API. Ik heb er ooit eentje geschreven: http://wouterj.nl/news/google-maps-api-v3-begin-tot-eind/383/
Gewijzigd op 12/12/2012 16:13:11 door - Ariën -
Donald Dylan op 12/12/2012 15:44:06:
Kan iemand voor mij een hele simpele placemark maken op basis van latitude en longtitude?
Dit is de eenvoudige code die je nodig hebt voor wat je vraagt.
1 Map, gecentreerd rond een gekozen locatie; met een marker op die locatie
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<html>
<head>
<title>Simpel voorbeeld van Google Maps Api met 1 marker</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
/**
* Deze functie moet uitgevoerd worden bij het laden van de pagina. Dat kan dus bv. met <body onload="initialize()">, maar hier tonen we een andere manier, onderaan dit script
*/
function initialize() {
// locatie object
var latLng = new google.maps.LatLng(
50.84499296050043, // breedte / lat
4.349976546145285 // lengte / lng
); // Locatie Manneken Pis in Brussel
// map object
var map = new google.maps.Map(document.getElementById('mapCanvas'), {
zoom: 19, // 20 is heel erg ingezoomd, 1 heel erg weinig
center: latLng,
mapTypeId: google.maps.MapTypeId.HYBRID // of bv. .ROADMAP
});
// marker object
var marker = new google.maps.Marker({
position: latLng,
title: 'Manneken Pis',
map: map,
draggable: false
});
}
// Onload handler to fire off the app.
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<style>
#mapCanvas {
width: 500px;
height: 400px;
float: left;
}
</style>
</head>
<body>
<div id="mapCanvas"></div>
</body>
</html>
<head>
<title>Simpel voorbeeld van Google Maps Api met 1 marker</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
/**
* Deze functie moet uitgevoerd worden bij het laden van de pagina. Dat kan dus bv. met <body onload="initialize()">, maar hier tonen we een andere manier, onderaan dit script
*/
function initialize() {
// locatie object
var latLng = new google.maps.LatLng(
50.84499296050043, // breedte / lat
4.349976546145285 // lengte / lng
); // Locatie Manneken Pis in Brussel
// map object
var map = new google.maps.Map(document.getElementById('mapCanvas'), {
zoom: 19, // 20 is heel erg ingezoomd, 1 heel erg weinig
center: latLng,
mapTypeId: google.maps.MapTypeId.HYBRID // of bv. .ROADMAP
});
// marker object
var marker = new google.maps.Marker({
position: latLng,
title: 'Manneken Pis',
map: map,
draggable: false
});
}
// Onload handler to fire off the app.
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<style>
#mapCanvas {
width: 500px;
height: 400px;
float: left;
}
</style>
</head>
<body>
<div id="mapCanvas"></div>
</body>
</html>
@K. Peeters, je bent geweldig, bedankt! :)
Ik ga nog even kijken hoe ik een description bij de placemark kan toevoegen en dat is het plaatje compleet :) Nogmaals bedankt voor alle reacties.