Google Maps API Ground Overlay

Developer
Martin Boyce
Size
2,961 Kb
Views
28,336
  1. Google Maps API Ground Overlay Previews
  2. Google Maps API Ground Overlay HTML Codes
  3. Google Maps API Ground Overlay CSS Codes
  4. Google Maps API Ground Overlay JS Codes

How do I make an google maps api ground overlay?

Load a image overlay of a local subdivision map on google base map. What is a google maps api ground overlay? How do you make a google maps api ground overlay? This script and codes were developed by Martin Boyce on 20 September 2022, Tuesday.

Google Maps API Ground Overlay Previews
IQ Test

Google Maps API Ground Overlay - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Google Maps API Ground 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="1" />
</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 Ground 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 Ground Overlay - Script Codes JS Codes

// This example uses a GroundOverlay to place an image on the map
var historicalOverlay;
function initMap() { var map = new google.maps.Map(document.getElementById('map'), { zoom: 13, center: {lat: -34.001088, lng: 151.068543}, scaleControl: true, streetViewControl: false, mapTypeControl: true, mapTypeId: google.maps.MapTypeId.ROADMAP }); var imageBounds = { north: -33.99019, south: -34.01175, east: 151.08132, west: 151.06315 }; historicalOverlay = new google.maps.GroundOverlay( 'https://dl.dropboxusercontent.com/u/192772681/como-overlay.png', imageBounds); historicalOverlay.setMap(map);
}
$('#slider1').change(function() { var newOpacityStr = $(this).val(); var newOpacity = parseFloat(newOpacityStr); historicalOverlay.setOpacity(newOpacity);
});
google.maps.event.addDomListener(window, 'load', initMap);
Google Maps API Ground Overlay - Script Codes
Google Maps API Ground Overlay - Script Codes
Home Page Home
Developer Martin Boyce
Username boycetrus
Uploaded September 20, 2022
Rating 3
Size 2,961 Kb
Views 28,336
Do you need developer help for Google Maps API Ground 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
Name
AJAX content from an RSS feed using jQuery
First steps with Handlebars.js
Flexbox login form
Test Case for ajax fail on single result
Nested flexbox layout for library catalog v2
Homepage thumbnail
Sutherland Shire Libraries Catalogue Search
Using Google Spreadsheets as JSON Source
Test Case for ajax fail on single result v2
Nested flexbox layout for library catalog
Create amazing SEO content 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!