在现有Google Maps路线代码中添加预定义路径及起止标记的需求

阿华AIGC实验室

2026-5-20

Add Predefined Route & Markers to Google Maps

Got it! Let's get that second route and markers A/B added to your existing Google Maps setup. Below is a complete, self-contained example that integrates your existing marker with the new path and start/end markers:

Complete Code Example

<!DOCTYPE html>
<html>
<head>
    <title>Google Maps with Custom Route</title>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
    <style>
        #map {
            height: 400px;
            width: 100%;
        }
    </style>
</head>
<body>
    <div id="map"></div>

    <script>
        function initMap() {
            // Initialize map (adjust center/zoom to fit all elements)
            const map = new google.maps.Map(document.getElementById('map'), {
                center: { lat: 2.897274, lng: 101.623088 }, // Midpoint between A and B
                zoom: 12
            });

            // --- Your existing marker (keep this part as is) ---
            const existingMarker = new google.maps.Marker({
                position: { lat: YOUR_EXISTING_LAT, lng: YOUR_EXISTING_LNG }, // Replace with your original coords
                map: map,
                title: 'Original Marker'
            });

            // --- Add Marker A (Start Point) ---
            const markerA = new google.maps.Marker({
                position: { lat: 2.852888, lng: 101.651970 },
                map: map,
                title: 'Marker A (Start)',
                icon: { // Optional: Custom green marker for start
                    url: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png'
                }
            });

            // --- Add Marker B (End Point) ---
            const markerB = new google.maps.Marker({
                position: { lat: 2.941660, lng: 101.594207 },
                map: map,
                title: 'Marker B (End)',
                icon: { // Optional: Custom red marker for end
                    url: 'http://maps.google.com/mapfiles/ms/icons/red-dot.png'
                }
            });

            // --- Draw the Predefined Route ---
            const routePath = new google.maps.Polyline({
                path: [
                    { lat: 2.852888, lng: 101.651970 }, // Marker A
                    // Add intermediate coordinates here if you have them!
                    { lat: 2.941660, lng: 101.594207 }  // Marker B
                ],
                geodesic: true,
                strokeColor: '#FF0000',
                strokeOpacity: 1.0,
                strokeWeight: 4
            });
            routePath.setMap(map);
        }

        // Initialize map when page loads
        window.onload = initMap;
    </script>
</body>
</html>

Key Customization Tips:

Replace YOUR_API_KEY with your actual Google Maps API key (you can grab one from the Google Cloud Console).
Swap YOUR_EXISTING_LAT and YOUR_EXISTING_LNG with the coordinates of your original marker to keep it in place.
If you have intermediate points for the route, just add them to the path array in the Polyline object (in order from start to end).
The custom green/red icons for markers A/B are optional—remove the icon property if you prefer the default marker style.
Tweak the map's center and zoom values if needed to make all markers and the route fit perfectly on screen.

This setup will display your original marker alongside the green start marker A, red end marker B, and a bold red line connecting them—exactly what you're looking for!

内容的提问来源于stack exchange，提问作者TechGuy