Google Maps API Custom Overlay

Developer
Size
3,336 Kb
Views
24,288

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 Previews

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);
});
Google Maps API Custom Overlay - Script Codes
Google Maps API Custom Overlay - Script Codes
Home Page Home
Developer Martin Boyce
Username boycetrus
Uploaded September 20, 2022
Rating 3
Size 3,336 Kb
Views 24,288
Do you need developer help for Google Maps API Custom Overlay?

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!

Martin Boyce (boycetrus) Script Codes
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!