Playing with a map

Developer
José Manuel Pérez
Size
2,245 Kb
Views
8,096
  1. Playing with a map Previews
  2. Playing with a map HTML Codes
  3. Playing with a map CSS Codes
  4. Playing with a map JS Codes

How do I make an playing with a map?

What is a playing with a map? How do you make a playing with a map? This script and codes were developed by José Manuel Pérez on 12 January 2023, Thursday.

Playing with a map Previews
IQ Test

Playing with a map - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Playing with a map</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="map"></div>
<div class="place-name">Elche</div> <script src='https://maps.googleapis.com/maps/api/js'></script>
<script src='https://jmperezperez.com/screenflow/lib/embed.js'></script> <script src="js/index.js"></script>
</body>
</html>

Playing with a map - Script Codes CSS Codes

* { margin: 0; padding: 0;
}
body { font-family: Helvetica, Arial;
}
#map { height: 500px;
}
.place-name { position: absolute; top: 20px; font-size: 24pt; text-shadow: 0 1px 5px #000; color: #fff; background-color: rgba(0,0,0,0.5); padding: 10px; padding-left: 20px; left: -1px;
}

Playing with a map - Script Codes JS Codes

var lat = 38.266944, lng = -0.698333;
var center = new google.maps.LatLng(lat, lng); var mapOptions = { center: center, zoom: 10, disableDefaultUI: true, mapTypeId: google.maps.MapTypeId.ROADMAP, styles: [ { "stylers": [ { "gamma": 0.68 }, { "invert_lightness": true }, { "lightness": -20 }, { "saturation": -100 }, ] }, { featureType: "road.highway", elementType: "geometry", stylers: [ { visibility: "off" } ] }, { featureType: "road", elementType: "labels", stylers: [ { visibility: "off" } ] }, { "featureType": "poi", "elementType": "labels", "stylers": [ { "visibility": "off" } ] }, { "featureType": "poi", "stylers": [ { "lightness": -50 } ] }, { "featureType": "landscape", "stylers": [ { "lightness": -50 } ] }, { "featureType": "transit", "stylers": [ { "visibility": "off" } ] },{ "featureType": "transit" } ] }; map = new google.maps.Map(document.getElementById("map"), mapOptions);
var point = new google.maps.LatLng(lat, lng); var newCircle = new google.maps.Circle({ radius: 2000, strokeColor: '#000', strokeOpacity: 80, strokeWeight: 0, fillColor: '#ff5500', fillOpacity: 1, center: point, map: map });
Playing with a map - Script Codes
Playing with a map - Script Codes
Home Page Home
Developer José Manuel Pérez
Username jmperez
Uploaded January 12, 2023
Rating 3
Size 2,245 Kb
Views 8,096
Do you need developer help for Playing with a map?

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!

José Manuel Pérez (jmperez) Script Codes
Name
Spotify - Now Playing Visualization - With news ticker
Spotify SVG
Alerting window popup
Reproducing Medium loading image effect
Drawing SVGs - Spotify Logo
Voice commands - Play a song
Spotify - Now Playing Visualization
SVG triangles transitioning to full image
Flexbox for image layout
Reproducing Medium loading image effect - WebP version
Create amazing captions 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!