One of our clients reported an issue with wrong points marker position on the map if the pickup points have coordinates. In the default plugin, it is not possible to add coordinates (longitude and latitude) but they are available in the PickupPoint class and you can set them.
In the dropdown with the pickup points options, the first marker is correct but if the customer selects any of the other ones the marker is placed on the coordinates of the last pickup point. The description and title are changing correctly but not the position of the pin.
In the ShipppingAddress.cshtml and OpcShippingsAddress.cshtml the pickup points markers code is generated in a loop, but the problem is that the "marker" variable is added multiple times in the code and the last one overwrites the previous. This can be seen here:
https://www.nop-templates.com/Help/nopCommerce_forum/PickupPointsProblem/pickuppoints.jpg
One of the solutions that we have found is to wrap the code for the marker inside an IIFE e.g.:
(function() {
var marker = new google.maps.Marker({
map: googleMap,
title: "@point.Name",
position: new google.maps.LatLng(@point.Latitude, @point.Longitude),
icon: "http://maps.google.com/mapfiles/ms/icons/blue-dot.png"
});
markers.set("@value", marker);
google.maps.event.addListener(marker, 'click', function () {
$('#pickup-points-select').val("@value")
infowindow.setContent("@pickupPointInfo");
infowindow.open(googleMap, marker);
});
@if (i == 0)
{
<text>googleMap.setCenter(marker.getPosition())</text>
}
}());This problem doesn't exist when the point hasn't got coordinates because in that case the markers code is placed in a function.
Regards,
Stoyan
