Google Maps Practice Pen

Developer
Tobi Weinstock
Size
2,221 Kb
Views
40,480
  1. Google Maps Practice Pen Previews
  2. Google Maps Practice Pen HTML Codes
  3. Google Maps Practice Pen CSS Codes
  4. Google Maps Practice Pen JS Codes

How do I make an google maps practice pen?

Warming up to the google maps api. Use a button to set the map to user's coordinates.. What is a google maps practice pen? How do you make a google maps practice pen? This script and codes were developed by Tobi Weinstock on 02 September 2022, Friday.

Google Maps Practice Pen Previews
IQ Test

Google Maps Practice Pen - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Google Maps Practice Pen</title> <link rel='stylesheet prefetch' href='http:////netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="map-canvas"> <i class="icon-spinner icon-spin" id="spinner"></i>
</div>
<p> <button onclick="geoFindMe()"> Set map to my current location </button> <span class="output"></span>
</p> <script src='https://maps.googleapis.com/maps/api/js'></script> <script src="js/index.js"></script>
</body>
</html>

Google Maps Practice Pen - Script Codes CSS Codes

#map-canvas { width: 500px; height: 400px; background-color: #ccc; display: flex; justify-content: center; align-items: center;
}
.icon-spin { font-size: 44px; display: none;
}

Google Maps Practice Pen - Script Codes JS Codes

function geoFindMe() { var spinner = document.getElementById('spinner'); var output = document.getElementsByClassName('output'); spinner.style.display = 'inline-block'; if (!navigator.geolocation) { output.innerHTML = "Geolocation is not supported in your browser"; return; }; function success(position) { userLat = position.coords.latitude; userLong = position.coords.longitude; console.log(userLat, userLong); var mapCanvas = document.getElementById('map-canvas'); var mapOptions = { center: new google.maps.LatLng(userLat, userLong), zoom: 11, mapTypeId: google.maps.MapTypeId.HYBRID } var map = new google.maps.Map(mapCanvas, mapOptions); }; function error() { output.innerHTML = "Unable to retrieve your location"; }; navigator.geolocation.getCurrentPosition(success, error);
}
Google Maps Practice Pen - Script Codes
Google Maps Practice Pen - Script Codes
Home Page Home
Developer Tobi Weinstock
Username tvweinstock
Uploaded September 02, 2022
Rating 3
Size 2,221 Kb
Views 40,480
Do you need developer help for Google Maps Practice Pen?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Tobi Weinstock (tvweinstock) Script Codes
Name
A Pen by Tobi Weinstock
Emoji Ajax Type Ahead
Love for Paris
React Tabs
World Clock v2
Flexbox World Clock
Paparazzi Drone
French Words v2
SVG Picnic Pattern
Personal SVG Logo
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!