ChatGPT | Creating Prompts to Generate Code

We can use ChatGPT to generate code, for example, a Javascript used for webpages. The following is an example prompt asking ChatGPT to create a map to index our travel blogs.​

Prompt: As a web developer, create a web page code that displays a world map, and create an array with the location in（Latitude and longitude, page name). Then, the user can click on the map with the location info link to a fixed link like sukeeteatime.com/+page name.​

Note that the prompt has to provide specific requirements so that ChatGPT can generate the code we need. The example generated code is shown as follows, and the index map page is used on the My Destinations page. ​

<div id="map"/>
<script>
        // Array of locations with latitude, longitude, and page name
        var locations = [
            { lat: 40.712776, lng: -74.005974, name: "New York" },
            { lat: 51.5074, lng: -0.1278, name: "London" },
            { lat: 35.6895, lng: 139.6917, name: "Tokyo" },
            // Add more locations here...
        ];

        // Initialize and display the map
        function initMap() {
            var map = new google.maps.Map(document.getElementById('map'), {
                center: { lat: 0, lng: 0 },
                zoom: 2
            });

            // Create markers and info windows for each location
            locations.forEach(function(location) {
                var marker = new google.maps.Marker({
                    position: { lat: location.lat, lng: location.lng },
                    map: map
                });

                var infoWindow = new google.maps.InfoWindow({
                    content: '<a href="https://sukeeteatime.com/' + location.name + '">' + location.name + '</a>'
                });

                marker.addListener('click', function() {
                    infoWindow.open(map, marker);
                });
            });
        }
    </script>
    <script async defer src="https://maps.googleapis.com/maps/api/js>key=YOUR_API_KEY&callback=initMap"></script>
 <!-- Replace YOUR_API_KEY with your Google Maps API key -->