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!
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 |
Custom Checkbox and radio inputs SCSS | Rgfx | 3,367 Kb |
Simple search using AngularJS | Haykou | 1,802 Kb |
Fun animations with CSS3 | Minimalmonkey | 2,360 Kb |
Collapsing Widget | Er40 | 4,279 Kb |
Direction-icon | Alexandremasy | 3,323 Kb |
Click Based Rotation Demo | Zeaklous | 2,086 Kb |
Mapbox Directions with geolocation tracking | Pollardld | 5,827 Kb |
TinFoil Boats | Chandralil | 4,577 Kb |
Cartoon Bomb | Tcmulder | 4,929 Kb |
Toggle Time | Petebot | 5,345 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!