mimdaru mimdaru - 3 years ago 123
jQuery Question

jquery repeatly attributes - google map

$(document).ready(function() {

var markers = [

{

"lat": '51.508742',
"lng": '-0.12085'

}

];
window.onload = function () {

var mapOptions = {

zoom: 8,
center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
mapTypeId: google.maps.MapTypeId.ROADMAP,
fullscreenControl: true,
styles: [{"featureType":"administrative","elementType":"labels.text.fill","stylers":[{"color":"#6195a0"}]},{"featureType":"landscape","elementType":"all","stylers":[{"color":"#f2f2f2"}]},{"featureType":"landscape","elementType":"geometry.fill","stylers":[{"color":"#ffffff"}]},{"featureType":"poi","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"poi.park","elementType":"geometry.fill","stylers":[{"color":"#e6f3d6"},{"visibility":"on"}]},{"featureType":"road","elementType":"all","stylers":[{"saturation":-100},{"lightness":45},{"visibility":"simplified"}]},{"featureType":"road.highway","elementType":"all","stylers":[{"visibility":"simplified"}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#f4d2c5"},{"visibility":"simplified"}]},{"featureType":"road.highway","elementType":"labels.text","stylers":[{"color":"#4e4e4e"}]},{"featureType":"road.arterial","elementType":"geometry.fill","stylers":[{"color":"#f4f4f4"}]},{"featureType":"road.arterial","elementType":"labels.text.fill","stylers":[{"color":"#787878"}]},{"featureType":"road.arterial","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"all","stylers":[{"color":"#eaf6f8"},{"visibility":"on"}]},{"featureType":"water","elementType":"geometry.fill","stylers":[{"color":"#eaf6f8"}]}]

};
var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);

}

$("#tab_id_1 li").click(function() {
event.preventDefault();
var data_lat1 = $(this).attr('data-lat-1');
var data_lng1 = $(this).attr('data-lng-1');
var data_lat2 = $(this).attr('data-lat-2');
var data_lng2 = $(this).attr('data-lng-2');
map(data_lat1,data_lng1,data_lat2,data_lng2);

});

function map(data_lat1,data_lng1,data_lat2,data_lng2){

$("#tab_id_1 li").on("click",function(){

var markers = [

{

"lat": ''+ data_lat1 +'',
"lng": ''+ data_lng1 +''

}
,
{

"lat": ''+ data_lat2 +'',
"lng": ''+ data_lng2 +''

}
];
console.log(markers);
var mapOptions = {

zoom: 7,
center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
mapTypeId: google.maps.MapTypeId.ROADMAP,
fullscreenControl: true,
styles: [{"featureType":"administrative","elementType":"labels.text.fill","stylers":[{"color":"#6195a0"}]},{"featureType":"landscape","elementType":"all","stylers":[{"color":"#f2f2f2"}]},{"featureType":"landscape","elementType":"geometry.fill","stylers":[{"color":"#ffffff"}]},{"featureType":"poi","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"poi.park","elementType":"geometry.fill","stylers":[{"color":"#e6f3d6"},{"visibility":"on"}]},{"featureType":"road","elementType":"all","stylers":[{"saturation":-100},{"lightness":45},{"visibility":"simplified"}]},{"featureType":"road.highway","elementType":"all","stylers":[{"visibility":"simplified"}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#f4d2c5"},{"visibility":"simplified"}]},{"featureType":"road.highway","elementType":"labels.text","stylers":[{"color":"#4e4e4e"}]},{"featureType":"road.arterial","elementType":"geometry.fill","stylers":[{"color":"#f4f4f4"}]},{"featureType":"road.arterial","elementType":"labels.text.fill","stylers":[{"color":"#787878"}]},{"featureType":"road.arterial","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"all","stylers":[{"color":"#eaf6f8"},{"visibility":"on"}]},{"featureType":"water","elementType":"geometry.fill","stylers":[{"color":"#eaf6f8"}]}]

};
var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
var infoWindow = new google.maps.InfoWindow();
var lat_lng = new Array();
var latlngbounds = new google.maps.LatLngBounds();
for (i = 0; i < markers.length; i++) {
var data = markers[i]
var myLatlng = new google.maps.LatLng(data.lat, data.lng);
lat_lng.push(myLatlng);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: data.title,
icon: "marker-icon.png"
});
latlngbounds.extend(marker.position);
(function (marker, data) {
google.maps.event.addListener(marker, "click", function (e) {
infoWindow.setContent(data.description);
infoWindow.open(map, marker);
});
})(marker, data);
}
map.setCenter(latlngbounds.getCenter());
map.fitBounds(latlngbounds);

//***********ROUTING****************//

//Intialize the Path Array
var path = new google.maps.MVCArray();

//Intialize the Direction Service
var service = new google.maps.DirectionsService();

//Set the Path Stroke Color
var poly = new google.maps.Polyline({ map: map, strokeColor: '#f09c00', strokeOpacity: 1.0, strokeWeight: 5 });

//Loop and Draw Path Route between the Points on MAP
for (var i = 0; i < lat_lng.length; i++) {
if ((i + 1) < lat_lng.length) {
var src = lat_lng[i];
var des = lat_lng[i + 1];
path.push(src);
poly.setPath(path);
service.route({
origin: src,
destination: des,
travelMode: google.maps.DirectionsTravelMode.DRIVING
}, function (result, status) {
if (status == google.maps.DirectionsStatus.OK) {
for (var i = 0, len = result.routes[0].overview_path.length; i < len; i++) {
path.push(result.routes[0].overview_path[i]);
}
}
});
}
}
});
}
});


Help please! when the first time is pushed, nothing happens, then when you press again on one of the "li" the coordinates are sent with 1 array, the third time when the push is sent 2 arrays, the fourth time is sent 3 arrays, the fifth time is sent 4 arrays, how can I solve the problem, when I'm pushing to send only 1 array, sorry for my bad english.

<ul id="tab_id_1" class="uk-nestable" data-uk-nestable="{group:'my-group', maxDepth:1}">


<li data-lat-1="51.5501741" data-lng-1="-0.003371000000015556" data-lat-2="-33.88081" data-lng-2="-33.88081" class="uk-nestable-item">
<input type="hidden" name="id_1[]" value="9">
<div class="uk-nestable-panel">
<div>
<div class="table dd_table">

<div>Sat30</div>
<div>Nr.Q767</div>
<div>DELIVERY</div>
<div>754876</div>
<div><a href="....." title="View JOB"><i class="fa fa-eye"></i></a></div>


</div>
</div>
</div>
</li>

<li data-lat-1="48.57340529999999" data-lng-1="7.752111300000024" data-lat-2="51.5111922" data-lng-2="51.5111922" class="uk-nestable-item">
<input type="hidden" name="id_1[]" value="7">
<div class="uk-nestable-panel">
<div>
<div class="table dd_table">

<div>Sat30</div>
<div>Nr.W996</div>
<div>DELIVERY</div>
<div>5365-64</div>
<div><a href="....." title="View JOB"><i class="fa fa-eye"></i></a></div>


</div>
</div>
</div>
</li>

<li data-lat-1="48.57340529999999" data-lng-1="7.752111300000024" data-lat-2="52.19173" data-lng-2="52.19173" class="uk-nestable-item">
<input type="hidden" name="id_1[]" value="11">
<div class="uk-nestable-panel">
<div>
<div class="table dd_table">

<div>Sat30</div>
<div>Nr.J765</div>
<div>PICK-UP/DELIVERY</div>
<div>MD-2038/3811-558</div>
<div><a href="......" title="View JOB"><i class="fa fa-eye"></i></a></div>


</div>
</div>
</div>
</li>
</ul>

Answer Source

Please remove the

$("#tab_id_1 li").on("click",function(){

re declaration inside the map function..
That should solve your problem.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download