Prompt Details
Model
Chat - GPT-3.5 (gpt-3.5-turbo)
Token size
54 ($0.00010 / call)
Example input
To begin, simply duplicate and insert the prompt. Make use of the new template as a starting point for crafting your own unique story!
Example output
Sure! Here's a basic example of an interactive map using HTML, CSS, and JavaScript with a minimalist design:
HTML:
```html
<!DOCTYPE html>
<html>
<head>
<title>Interactive Map</title>
<style>
#map {
width: 100%;
height: 400px;
}
#currentLocationBtn {
position: absolute;
top: 20px;
right: 20px;
z-index: 999;
padding: 10px;
background-color: #ffffff;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<div id="map"></div>
<button id="currentLocationBtn">Current Location</button>
<script src="script.js"></script>
</body>
</html>
```
CSS:
```css
/* No additional CSS is required for this example */
```
JavaScript (script.js):
```javascript
// Function to initialize the map
function initMap() {
// Set your map options (latitude, longitude, zoom level)
var options = {
center: { lat: 37.7749, lng: -122.4194 },
zoom: 12
};
// Create the map instance
var map = new google.maps.Map(document.getElementById("map"), options);
// Add marker for current IP position
var currentLocationBtn = document.getElementById("currentLocationBtn");
currentLocationBtn.addEventListener("click", function() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var currentLat = position.coords.latitude;
var currentLng = position.coords.longitude;
// Create a marker for current location
var marker = new google.maps.Marker({
position: { lat: currentLat, lng: currentLng },
map: map
});
// Center the map on the current location
map.setCenter({ lat: currentLat, lng: currentLng });
});
}
});
}
// Load the Google Maps API asynchronously
function loadScript() {
var script = document.createElement("script");
script.src = "https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap";
document.body.appendChild(script);
}
window.onload = loadScript;
```
Please note that in order to use Google Maps API, you need to replace `"YOUR_API_KEY"` in the `script.src` with your actual API key. Also, you may need to sign up for a Google Maps API key if you don't have one already.
This code sets up a simple map with a marker for the current IP position. When the "Current Location" button is clicked, it uses the browser's geolocation API to retrieve the user's current position and adds a marker on the map at that location. The map is initialized using the Google Maps API.
Instant access
Commercial use
Money‑backBy purchasing this prompt, you agree to our terms of service
1
Favorites
12
Views
GPT-3.5-TURBO
💎 Create the website of your dreams! Including your own interactive map and move to the place you want.
💥 You will have everything you need to create it, such as your own html, css and javascript code.
🌟 Workable for any design, GET IT NOW!
...more
Added over 1 month ago
