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 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83
| <script type="text/javascript">
var map;
var markers = [];
var uniqueId = 1;
var infoWindow;
window.onload = function ()
{
var mapOptions =
{
center: new google.maps.LatLng(48.858565, 2.347198),
zoom: 6,
//draggable:true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
//Direction requests
directionsService = new google.maps.DirectionsService;
directionsDisplay = new google.maps.DirectionsRenderer({draggable: true,});
//Attach click event handler to the map.
google.maps.event.addListener(map, 'click', function (event)
{
//Determine the location where the user has clicked.
var location = event.latLng;
//Create a marker and placed it on the map.
var marker = new google.maps.Marker(
{
position: location,
map: map,
});
//Set unique id
marker.id = uniqueId;
uniqueId++;
//Attach click event handler to the marker.
google.maps.event.addListener(marker, "click", function (event)
{
var lat = location.lat();
var lng = location.lng();
var content = 'Latitude: ' + location.lat() + '<br />Longitude: ' + location.lng();
content += "<input type = 'button' va;ue = 'Depart' onclick = 'DepartMarker(" + marker.id + ");' value = 'Depart' />";
infoWindow = new google.maps.InfoWindow({content: content});
infoWindow.open(map, marker);
});
//Add marker to the array.
markers.push(marker);
});
};
function DepartMarker(id)
{
//Find and remove the marker from the Array
for (var i = 0; i < markers.length; i++)
{
if (markers[i].id == id)
{
//Remove the marker from Map
markers[i].setMap(null);
markers[i] = new google.maps.Marker(
{
position: new google.maps.LatLng(this.lat, this.lng),
map: map,
icon:'http://mapicons.mapsmarker.com/wp-content/uploads/mapicons/shape-default/color-9d7050/shapecolor-color/shadow-1/border-dark/symbolstyle-white/symbolshadowstyle-dark/gradient-no/car.png'
}),
markerA = new google.maps.Marker(
{
position: new google.maps.LatLng(this.lat, this.lng),
map: map,
icon:'http://mapicons.mapsmarker.com/wp-content/uploads/mapicons/shape-default/color-9d7050/shapecolor-color/shadow-1/border-dark/symbolstyle-white/symbolshadowstyle-dark/gradient-no/car.png'
}),
//InfoWindow close after clic.
infoWindow.close(map,markers);;
return;
}
}
}
} |
Partager