GMAP mit Distance Matrix

Dieses Thema ist geschlossen.

sfx12

Senior Member

Dabei seit: 28.02.2019
Beiträge: 104

31.10.2024, 09:48

Hallo@all,
ich habe mit meinen bedürftigen Kenntnissen in Jquery es geschafft die Gmap soweit anzupassen, dass mir beim klick auf einen Button, die Entfernung zum Zielort ausrechnet. Das funktioniert soweit, jedoch besteht ein Riesenproblem...ich habe gestern von Google eine Benachrichtigung bekommen dass ich über 280€ zahlen muss weil das Limit für "free" überschritten wurde, Distance Matrix knapp 70k Aufrufe innnerhalb 48h, nach einem Chat mit dem Support, meinte dieser das irgendwie 30 Aufrufe pro sekunde stattfinden auf der domain.Das einzige was ich mir vorstellen kann ist, dass da ein Wurm in meinem Code ist, irgendwo macht der nen ständigen "loop" aber ich hab null Plan wo das ist.

Vielleicht simpel und jemand von euch kommt drauf, ich wäre echt seeehr dankbar.

Code:

<?php
/*** To use google maps, please fill in your Google Maps API Key below*/
$GoogleMapsApiKey = 'AIzaSyDrMnBwFIwJSiZ0APIrNW3ozP_3iJherPM';

/** * DO NOT EDIT ANYTHING BELOW THIS LINE UNLESS YOU KNOW WHAT YOU ARE DOING! */
if(strlen($GoogleMapsApiKey) < 1)
{
echo ($GLOBALS['TL_LANGUAGE'] == 'de' ? 'Google Maps API Schlüssel benötigt. Bitte tragen Sie den API Schlüssel im Template customelement_gmap.html5 ein' : 'Google Maps requires a valid API Key!');
return '';
}
?>

<?php
$GLOBALS['TL_JAVASCRIPT'][] = 'https://maps.googleapis.com/maps/api/js?v=3.exp&key='.$GoogleMapsApiKey;
?>

<div class="<?php echo $this->class; ?> block"<?php echo $this->cssID; ?><?php if ($this->style): ?> style="<?php echo $this->style; ?>"<?php endif; ?>>
<div class="ce_google_map_inside" id="gmap_<?php echo $this->id; ?>" style="height: <?php echo $this->field('height')->value(); ?>px;"></div>
</div>

<?php
$arrLocations = array();
if(count($this->group('adresse')) > 0)
{
foreach($this->group('adresse') as $i => $fields)
{
$arrLocations[$i] = array
(
'country' => $this->field('country#'.$i)->value(),
'street' => $this->field('street#'.$i)->value(),
'zipcode' => $this->field('zipcode#'.$i)->value(),
'city' => $this->field('place#'.$i)->value(),
'infotext' => \StringUtil::substrHtml($this->field('description#'.$i)->value(),strlen($this->field('description#'.$i)->value())),
#'latitude' => '',
#'longitude'=> '',
'markerTitle' => 'Location: '.$i,
);

// marker icon
if($this->field('icon#'.$i)->value())
{
$image = $this->field('icon#'.$i)->generate();
$arrLocations[$i]['icon'] = \StringUtil::substrHtml($image,strlen($image));
}
}
}
?>
<div style="display:block" id="pos">
Deine Position wird ermittelt...
</div>

<script>
navigator.geolocation.getCurrentPosition(function( position){
document.getElementById('pos').innerHTML = 'Latitude: '+position.coords.latitude+' / Longitude: '+position.coords.longitude;
}, function(){
document.getElementById('pos').innerHTML = 'Deine Position konnte leider nicht ermittelt werden';
});
</script>

<script>
/* <![CDATA[ */
/**
* Initialize the googlemap
*/
function initializeMap_<?php echo $this->id; ?>() {

var map;
var center = {};
var gray = [{featureType: "all", stylers: [{ saturation:-100},{gamma:0},{invert_lightness:0}]}];

/***own Styles here***/


/***distanz Calculate***/
jQuery(function() {

function calculateDistance(origin, destination) {
var service = new google.maps.DistanceMatrixService();
service.getDistanceMatrix(
{
origins: [origin],
destinations: [destination],
travelMode: google.maps.TravelMode.DRIVING,
unitSystem: google.maps.UnitSystem.METRIC,
avoidHighways: false,
avoidTolls: false
}, callback);
}

function callback(response, status) {
var err = "error"
if (status != google.maps.DistanceMatrixStatus.OK) {
{{iflng::pl}}jQuery('#result').html("Odległość ca. " + total + " Km ");{{iflng}}
{{iflng::de}}jQuery('#result').html("Entfernung ca. " + total + " Km ");{{iflng}}

} else {
var origin = response.originAddresses[0];
var destination = response.destinationAddresses[0];
if (response.rows[0].elements[0].status === "ZERO_RESULTS") {
jQuery('#result').html("Better get on a plane. There are no roads between "
+ origin + " and " + destination);
} else {
var distance = response.rows[0].elements[0].distance;
var distance_value = distance.value;
var distance_text = distance.text;
var total = distance_text.substring(0, distance_text.length -2);

{{iflng::pl}}jQuery('#result').html("Odległość ca. " + total + " Km ");{{iflng}}
{{iflng::de}}jQuery('#result').html("Entfernung ca. " + total + " Km ");{{iflng}}

var origin = jQuery('#origin').val();
var destination = jQuery('#destination').val();
var distance_text = calculateDistance(origin, +meineLatitude + ', ' + meineLongitude);
}}}

var map = new google.maps.Map(document.getElementById('gmap_<?ph p echo $this->id; ?>'),mapOptions);

// build locations array
var locations = [];
<?php foreach($arrLocations as $i => $location): ?>
var location = {};
<?php foreach($location as $k => $v): ?>
location.<?php echo $k; ?> = '<?php echo $v; ?>';
<?php endforeach; ?>
locations.push(location);
<?php endforeach; ?>
var infowindow = new google.maps.InfoWindow();
var markers = new Array();
var neededGeocoder = false;

// place markers
for(var i = 0; i < locations.length; i++)
{
(function(location) // must encapsule to avoid wrong index in geocoder callback
{
// need the geocoder to find coordinates
if(location.latitude == undefined || location.longitude == undefined)
{
var geocoder = new google.maps.Geocoder;
var address = location.street + ',' + location.zipcode + ',' + location.city + ',' + location.country;
geocoder.geocode({'address': address}, function(results, status)
{
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
title: location.markerTitle,
icon: location.icon
});

google.maps.event.addListener(marker, 'click', function()
{
// go to marker position and zoom
map.panTo(marker.position);
map.setZoom(12);
map.panBy(0, -120);
infowindow.setContent('<div class="gmap_infotext">'+ location.infotext+'</div>');
infowindow.open(map, marker);
});

// show map, open infoBox
google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
// go to marker position and zoom
map.panTo(marker.position);
map.setZoom(8);
map.panBy(0, -120);
infowindow.setContent('<div class="gmap_infotext">'+ location.infotext+'</div>');

infowindow.open(map, marker);
});

centers_lat.push(results[0].geometry.location.lat());
centers_lng.push(results[0].geometry.location.lng());
});

jQuery('#posbutton').click(function(){
jQuery('#loading').append({{iflng::de}}"Entfernung und Position wird ermittelt..."{{iflng}}{{iflng::pl}}"Odległość i pozycja są ustalane..."{{iflng}});
jQuery('#loading').css("display","block");

//My pos
navigator.geolocation.getCurrentPosition(function( position){
meineLongitude = position.coords.longitude;
meineLatitude = position.coords.latitude;


var marker2 = new google.maps.Marker ({
position: new google.maps.LatLng(meineLatitude,meineLongitude),
map: map,
title: "Hier bist du",
icon: location.icon
});

////LatLng in Adresse formatieren
var latlng = {lat: parseFloat(meineLatitude), lng: parseFloat(meineLongitude)};
geocoder.geocode({'location': latlng}, function(results, status) {
/////////


// go to marker position and zoom
map.panTo(marker2.position);
map.setZoom(7);
infowindow.setPosition(marker2.position);
infowindow.setContent({{iflng::de}}'Sie sind hier: <br />'+ results[0].formatted_address{{iflng}}
{{iflng::pl}}'Jesteś tutaj: <br />'+ results[0].formatted_address{{iflng}});

infowindow.open(map,marker2);
map.setCenter(marker2.position);

var origin = jQuery('#origin').val(location.street + ',' + location.zipcode + ',' + location.city + ',' + location.country);
var destination = jQuery('#destination').val(+meineLatitude + ', ' + meineLongitude);


jQuery('#distance_form input:submit').submit();
var origin = jQuery('#origin').val();
var destination = jQuery('#destination').val();
var distance_text = calculateDistance(origin, +meineLatitude + ', ' + meineLongitude);


// Draw a line showing the straight distance between the markers
var flightPlanCoordinates = [
{lat: +meineLatitude, lng: meineLongitude},
{lat: 52.597399017153656, lng: 8.117807688649808}

];


var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});

flightPath.setMap(map);

jQuery('#loading').css("display","none");

});

});

});

}

// location has coordinates.
else
{
var pos = new google.maps.LatLng(location.latitude, location.longitude);

var marker = new google.maps.Marker(
{
position: pos,
map: map,
title: location.markerTitle,
icon: location.icon
});
google.maps.event.addListener(marker, 'click', function()
{
// go to marker position and zoom
map.panTo(marker.position);
map.setZoom(25);
infowindow.setContent('<div class="gmap_infotext">'+location.infotext+'</div>');
infowindow.open(map, marker);
});

centers_lat.push(location.latitude);
centers_lng.push(location.longitude);
}
})(locations[i]); //closure passing in variables from loop
}

// find average coordinate as map center
if(locations.length > 0)
{
setTimeout(function()
{
var avg_lat = 0,avg_lng = 0;
var c = centers_lat.length;
for(var i = 0; i < c; i++)
{
avg_lat += centers_lat[i];
avg_lng += centers_lng[i];
}

var center =
{
lat: avg_lat/c,
lng: avg_lng/c
};
map.setCenter( center );
}, 1200);
}
// fallback to default center
else
{
center.lat = 51.1958685;
center.lng = 10.4809570;
map.setCenter( center );
}


/***end distance calc***/
});
/***end distance calc***/
}

google.maps.event.addDomListener(window, 'load',initializeMap_<?php echo $this->id; ?>);
/* ]]> */

//Routebox open
jQuery( document ).ready(function() {
jQuery('#routebox').css("display","none");
jQuery('#posbutton').click(function(){


if (routeposition = true)

{
jQuery('#routebox').css("display","block");
jQuery('#mapbox').css("display","none");
//alert("routposition=0");

}

else
{
jQuery('#routebox').css("display","none");
jQuery('#mapbox').css("display","block");
routeposition = false;
//alert("routposition=1")
return false;

}

});

});
</script>

Stichworte: -

Tim

Administrator

Dabei seit: 17.06.2015

Beiträge: 9175
- Teilen
- Tweet
#2

31.10.2024, 10:47

Das ist ein Eclipse9 Template, oder? Es werden auch noch veraltete Namespaces genutzt. Das ist Ding ist in jedem Fall mehrere Jahre alt.
Ich würde sagen, wir reden hier von einer Installation, die über 6-7 Jahre alt ist (oder älter).

Ich denke das fällt in die Rubrik "Aufträge", ggf. im gleichen Atemzug auch DSGVO-sicher machen.
---
Ein grober Blick, mehr wäre auch für mich ganz klar ein Wartungsauftrag! Ich schick Dir auch gern eine PayPal

Ich denke das ist das Problem: Deine Distanz-Logik ist nicht in den Click-Listenern, sondern in der locations Schleife, die die Marker platziert. Damit wird dies bei jedem Seitenaufruf, für jeden Ort in der Map gefeuert - nicht erst bei Klick. Da feuert meines Erachtens auch immer ein Formular.
Bei Klick wirds nur sichtbar, weil dann das Infofestner sichtbar wird.

Man sollte alle Anfragen an Google in der Browser-Console sehen. Da sollten vermeintliche Flaschhälse sichtbar werden.
---
Ich schließe das Ticket an dieser Stelle. Wer sich dem ganzen annehmen möchte, kann Dir eine PN schicken. Ich kann auch an einen unserer Partner vermitteln.
Angehängte Dateien

Zuletzt geändert von Tim; 31.10.2024, 12:08.

http://www.premium-contao-themes.com
Kommentar

Vorherige template Weiter

Ankündigung

GMAP mit Distance Matrix

GMAP mit Distance Matrix

Kommentar