Google Maps API Custom Overlay
How do I make an google maps api custom overlay?
Load a custom overlay set of tiles from a local subdivision map. What is a google maps api custom overlay? How do you make a google maps api custom overlay? This script and codes were developed by Martin Boyce on 20 September 2022, Tuesday.
Google Maps API Custom Overlay - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Google Maps API Custom Overlay</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="map" class="map"></div>
<div class="map-slider"> Drag to Show / Hide Map <input id="slider1" type="range" min="0" max="1" step="0.1" value="0.7" />
</div>
<div class="container-fluid"> <div class="row"> <div class="col-lg-8 col-lg-offset-2"> <h1>Sutherland Shire Libraries <small>Como Subdivision Map</small></h1> <p class="lead">Zoom in and out to see detail on the Como Subdivision Map. Drag the slider to adjust the transparency of the map.</p> </div> </div><!-- /row -->
</div><!-- /container -->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCXibAAKiuyyPPWHdNh8fJV5_IHaELAicg&sensor=true"></script> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Google Maps API Custom Overlay - Script Codes CSS Codes
.map { width: 100vw; height: 70vh; background-color: #d4e4e4;
}
.map-slider { background-color: #0083a9; margin: 0; padding-top: 12px; padding-bottom: 6px; color: #ffffff; text-align: center;
}
.map-slider > input[type='range'] { width: 200px; margin: 0 auto; margin-top: 6px;
}
Google Maps API Custom Overlay - Script Codes JS Codes
//create the subdivision map overlay
//path to map tiles parent folder
var subdivisionOverlayUrl = '//dl.dropboxusercontent.com/u/192772681/google-map-tiles/';
//generate the tile urls and set up the overlay options
var comoSubdivision = new google.maps.ImageMapType({ getTileUrl: function(coord, zoom) { return subdivisionOverlayUrl + '/' +zoom+ '/' +coord.x+ '/' + coord.y +'.png'; }, opacity: 0.7, name: 'Como Subdivision Map', tileSize: new google.maps.Size(256, 256)
});
//THE MAIN FUNCTION THAT IS CALLED WHEN THE WEB PAGE LOADS
function initMap() { //The empty map variable ('librariesMap') was created above. The line below creates the map, assigning it to this variable. var subdivisionMap = new google.maps.Map(document.getElementById("map"), { center: {lat: -34.001088, lng: 151.068543}, zoom: 13, maxZoom: 18, minZoom: 8, scaleControl: true, streetViewControl: false, mapTypeControl: true, //initialize with ROADMAP, the other 'premade' map styles are SATELLITE, TERRAIN and HYBRID. mapTypeId: google.maps.MapTypeId.ROADMAP }); //once the map is generated, display the Como Subdivision Map overlay subdivisionMap.overlayMapTypes.insertAt(0, comoSubdivision);
}
//When the page loads, the line below calls the function below called 'initMap' to load up the map.
google.maps.event.addDomListener(window, 'load', initMap);
//listen for changes to the opacity slider and update the overlay opacity
$('#slider1').change(function() { var newOpacityStr = $(this).val(); var newOpacity = parseFloat(newOpacityStr); comoSubdivision.setOpacity(newOpacity);
});
Developer | Martin Boyce |
Username | boycetrus |
Uploaded | September 20, 2022 |
Rating | 3 |
Size | 3,336 Kb |
Views | 24,288 |
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!
Name | Size |
Booklist Using Google Spreadsheets as JSON Source and Handlebars for templating | 3,063 Kb |
Flexbox test | 2,846 Kb |
Get the app | 3,198 Kb |
Google Maps API Ground Overlay | 2,961 Kb |
Google Analytics Event Tracking using html5 data attributes | 2,560 Kb |
Scratchpad | 5,672 Kb |
Test Case for ajax fail on single result v2 | 3,313 Kb |
Fetching book covers with the Google Books API | 8,769 Kb |
Test form validation with validate.js | 3,293 Kb |
Flexbox login form | 3,551 Kb |
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!
Name | Username | Size |
Drag in vanilla js using dotval math instead of translate | Paulq | 2,662 Kb |
Animation | B3ST1156 | 1,584 Kb |
Slim Grid SASS SCSS v3.2 | Thesturs | 4,709 Kb |
Google Maps API Ground Overlay | Boycetrus | 2,961 Kb |
Test | Dviate | 2,668 Kb |
A bit of elegance | Hackthevoid | 9,095 Kb |
Vanilla modal window | Jasonhowmans | 3,554 Kb |
Emberjs Bootstrap Modal Carousel | Somethingkindawierd | 4,233 Kb |
Apex Calculator | Michaelwnelson | 2,370 Kb |
CSS 3D Radio buttons | Andreasnylin | 1,650 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!