V - avengerhub.com

ường 1', students: 66, color: '#3498db'}, {lat: 10.8023, lng: 106.6867, ward: 'Phường 12', students: 52, color: '#3498db'}, {lat: 10.8198, lng: 106.6789, ward: 'Phường 5', students: 34, color: '#9b59b6'}, {lat: 10.8267, lng: 106.6856, ward: 'Phường 13', students: 27, color: '#9b59b6'}, {lat: 10.8145, lng: 106.6723, ward: 'Phường 7', students: 25, color: '#9b59b6'} ];studentAreas.forEach(area => { // Add circle for student concentration const radius = Math.max(area.students * 15, 180); const studentCircle = new google.maps.Circle({ strokeColor: area.color, strokeOpacity: 0.8, strokeWeight: 3, fillColor: area.color, fillOpacity: 0.25, map: map, center: { lat: area.lat, lng: area.lng }, radius: radius });// Add student marker const studentMarker = new google.maps.Marker({ position: { lat: area.lat, lng: area.lng }, map: map, title: `${area.ward}: ${area.students} học viên`, icon: { url: `data:image/svg+xml;charset=UTF-8,${encodeURIComponent(` `)}`, size: new google.maps.Size(35, 35), origin: new google.maps.Point(0, 0), anchor: new google.maps.Point(17.5, 17.5) }, animation: google.maps.Animation.DROP });const studentInfoWindow = new google.maps.InfoWindow({ content: `

${area.ward}

${area.students}

học viên

`, maxWidth: 200 });studentMarker.addListener('click', () => { closeAllInfoWindows(); studentInfoWindow.open(map, studentMarker); });// Store references markers.push(studentMarker); infoWindows.push(studentInfoWindow); });// Add district boundaries const districts = [ { name: 'Quận Bình Thạnh', coords: [ { lat: 10.7945, lng: 106.6823 }, { lat: 10.7945, lng: 106.7123 }, { lat: 10.8345, lng: 106.7123 }, { lat: 10.8345, lng: 106.6823 } ], color: '#3498db', students: 284 }, { name: 'Quận Gò Vấp', coords: [ { lat: 10.8234, lng: 106.6456 }, { lat: 10.8234, lng: 106.6856 }, { lat: 10.8534, lng: 106.6856 }, { lat: 10.8534, lng: 106.6456 } ], color: '#9b59b6', students: 93 } ];districts.forEach(district => { const districtPolygon = new google.maps.Polygon({ paths: district.coords, strokeColor: district.color, strokeOpacity: 0.6, strokeWeight: 3, fillColor: district.color, fillOpacity: 0.1, map: map });const districtInfoWindow = new google.maps.InfoWindow({ content: `

${district.name}

${district.students}

học viên

`, position: { lat: (district.coords[0].lat + district.coords[2].lat) / 2, lng: (district.coords[0].lng + district.coords[2].lng) / 2 }, maxWidth: 250 });districtPolygon.addListener('click', (event) => { closeAllInfoWindows(); districtInfoWindow.setPosition(event.latLng); districtInfoWindow.open(map); });infoWindows.push(districtInfoWindow); });// Store main markers and info windows markers.push(location1Marker, location2Marker, currentVUSMarker); infoWindows.push(location1InfoWindow, location2InfoWindow, currentVUSInfoWindow);// Fit map to show all markers const bounds = new google.maps.LatLngBounds(); markers.forEach(marker => { if (marker.getPosition) { bounds.extend(marker.getPosition()); } }); map.fitBounds(bounds);console.log('Google Maps loaded successfully');} catch (error) { console.warn('Google Maps failed to load:', error); showStaticMap(); } }shadow: 0 4px 12px rgba(0,0,0,0.3); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 16px; cursor: pointer; transition: transform 0.2s ease; " onmouseover="this.style.transform='scale(1.1)'" onmouseout="this.style.transform='scale(1)'">${emoji}`, iconSize: [size, size], iconAnchor: [size/2, size/2] }); } // Helper function to adjust color brightness function adjustBrightness(hex, percent) { const num = parseInt(hex.replace("#", ""), 16); const amt = Math.round(2.55 * percent); const R = (num >> 16) + amt; const G = (num >> 8 & 0x00FF) + amt; const B = (num & 0x0000FF) + amt; return "#" + (0x1000000 + (R < 255 ? R < 1 ? 0 : R : 255) * 0x10000 + (G < 255 ? G < 1 ? 0 : G : 255) * 0x100 + (B < 255 ? B < 1 ? 0 : B : 255)).toString(16).slice(1); } // Location markers with enhanced popups const location1 = L.marker([10.8135, 106.6847], { icon: createCustomIcon('#e74c3c', '🏢', 45) }).addTo(map); location1.bindPopup(`

🏢 Vị trí 1

Phan Văn Trị - Phạm Văn Đồng

✅ Trục đường chính

✅ Gần nhóm HV chính

⚠️ Kẹt xe giờ cao điểm

⚠️ Chi phí thuê cao

`, {maxWidth: 300}); const location2 = L.marker([10.8201, 106.6789], { icon: createCustomIcon('#27ae60', '🏢', 45) }).addTo(map); location2.bindPopup(`

🏢 Vị trí 2

Lê Quang Định - Phạm Văn Đồng

✅ Giao thông thông thoáng

✅ Gần phường 11, 5

⚠️ Xa phường 13, 12, 14, 7

`, {maxWidth: 300}); // Current VUS location const currentVUS = L.marker([10.8178, 106.6952], { icon: createCustomIcon('#f39c12', '🏫', 35) }).addTo(map); currentVUS.bindPopup(`

🏫 Cơ sở hiện tại

Trung tâm VUS

(Vị trí giả định)

`, {maxWidth: 250}); // Student concentration areas with enhanced styling const studentAreas = [ {lat: 10.8156, lng: 106.6923, ward: 'Phường 11', students: 77, color: '#3498db'}, {lat: 10.8089, lng: 106.6845, ward: 'Phường 1', students: 66, color: '#3498db'}, {lat: 10.8023, lng: 106.6867, ward: 'Phường 12', students: 52, color: '#3498db'}, {lat: 10.8198, lng: 106.6789, ward: 'Phường 5', students: 34, color: '#9b59b6'}, {lat: 10.8267, lng: 106.6856, ward: 'Phường 13', students: 27, color: '#9b59b6'}, {lat: 10.8145, lng: 106.6723, ward: 'Phường 7', students: 25, color: '#9b59b6'} ]; studentAreas.forEach(area => { // Add circle to show concentration with gradient effect const radius = Math.max(area.students * 15, 180); L.circle([area.lat, area.lng], { color: area.color, fillColor: area.color, fillOpacity: 0.25, radius: radius, weight: 3, opacity: 0.8 }).addTo(map); // Add student marker with number const studentIcon = L.divIcon({ className: 'student-marker', html: `

${area.students}

`, iconSize: [32, 32], iconAnchor: [16, 16] }); const studentMarker = L.marker([area.lat, area.lng], {icon: studentIcon}).addTo(map); studentMarker.bindPopup(`

${area.ward}

${area.students}

học viên

`, {maxWidth: 200}); }); // Add major roads as enhanced polylines const roads = [ { name: 'Đường Phan Văn Trị', coords: [ [10.8056, 106.6789], [10.8123, 106.6834], [10.8156, 106.6856], [10.8189, 106.6878] ], color: '#e74c3c', weight: 6 }, { name: 'Đường Phạm Văn Đồng', coords: [ [10.8089, 106.6745], [10.8134, 106.6823], [10.8178, 106.6889], [10.8223, 106.6945] ], color: '#34495e', weight: 6 }, { name: 'Đường Lê Quang Định', coords: [ [10.8156, 106.6734], [10.8189, 106.6767], [10.8223, 106.6801], [10.8256, 106.6834] ], color: '#27ae60', weight: 5 } ]; roads.forEach(road => { L.polyline(road.coords, { color: road.color, weight: road.weight, opacity: 0.8, smoothFactor: 1, lineCap: 'round', lineJoin: 'round' }).addTo(map).bindPopup(`

${road.name}

`); }); // Add district boundaries with enhanced styling const districts = [ { name: 'Quận Bình Thạnh', coords: [ [10.7945, 106.6823], [10.7945, 106.7123], [10.8345, 106.7123], [10.8345, 106.6823] ], color: '#3498db', students: 284 }, { name: 'Quận Gò Vấp', coords: [ [10.8234, 106.6456], [10.8234, 106.6856], [10.8534, 106.6856], [10.8534, 106.6456] ], color: '#9b59b6', students: 93 } ]; districts.forEach(district => { L.polygon(district.coords, { color: district.color, weight: 3, fillColor: district.color, fillOpacity: 0.1, opacity: 0.6 }).addTo(map).bindPopup(`

${district.name}

${district.students}

học viên

`, {maxWidth: 250}); }); // Add scale control with custom styling L.control.scale({ metric: true, imperial: false, position: 'bottomright' }).addTo(map); // Add custom zoom control map.zoomControl.setPosition('topright'); // Fit map to show all markers with padding const group = new L.featureGroup([location1, location2, currentVUS, ...studentAreas.map(area => L.marker([area.lat, area.lng]) )]); map.fitBounds(group.getBounds().pad(0.15)); // Add click handler for better UX map.on('click', function(e) { map.closePopup(); }); console.log('Interactive map loaded successfully'); } catch (error) { console.warn('Interactive map failed to load:', error); showStaticMap(); } }