Google Geolocation API-ting
HejJeg har et lille problem med noget geolokation, og en marker dertil.
Jeg kan godt få opløst lang/longtitude, på den første af de indtastede lokationer og der kommer ikke den markeringstekst op som der gerne skulle.
Den anden location kommer den slet ikke til, og jeg kan sgu ikke gennemskue hvad der er galt?
På min alert får jeg rigtignok oplyst lokationen - alert(latlng);
Håber en kyndig kan hjælpe:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Google Maps Multiple Markers</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.1.min.js"></script>
</head>
<body>
<div id="map" style="width: 500px; height: 400px;"></div>
<script type="text/javascript">
var locations = [
['1. adresse', 'Søndergade 58, 7850 Stoholm'],
['2. adresse', 'Kokholm 1C, 6000 Kolding']
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 6,
center: new google.maps.LatLng(56, 10),
mapTypeId: 'terrain'
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
var markers = new Array();
var counter = locations.length;
//alert(counter);
for (i = 0; i < counter; i++) {
$.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address='+locations[i]+'&sensor=false', null, function (data) {
var p = data.results[0].geometry.location
var latlng = new google.maps.LatLng(p.lat, p.lng);
alert(latlng);
marker = new google.maps.Marker({
position: latlng,
map: map
});
});
markers.push(marker);
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
function AutoCenter() {
// Create a new viewpoint bound
var bounds = new google.maps.LatLngBounds();
// Go through each...
$.each(markers, function (index, marker) {
bounds.extend(marker.position);
});
// Fit these bounds to the map
map.fitBounds(bounds);
}
AutoCenter();
</script>
</body>
</html>
