Scribd
Upload
10 views3 pages

Superimposing Google Maps

The document provides instructions on using the Google Maps JavaScript API to add overlays such as markers, polygons, and ground overlays with custom images tied to geographical coordinates. It includes sample HTML and JavaScript code for creating a simple map with a marker and a polygon in New Delhi. Additionally, it mentions Google My Maps as a no-code alternative for superimposing data and creating maps using uploaded files and drawing tools.

Uploaded by

Ramkumar J
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
10 views3 pages

Superimposing Google Maps

The document provides instructions on using the Google Maps JavaScript API to add overlays such as markers, polygons, and ground overlays with custom images tied to geographical coordinates. It includes sample HTML and JavaScript code for creating a simple map with a marker and a polygon in New Delhi. Additionally, it mentions Google My Maps as a no-code alternative for superimposing data and creating maps using uploaded files and drawing tools.

Uploaded by

Ramkumar J
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

1.

Using Google Maps JavaScript API — Adding Overlays

a) Markers & Shapes

You can add markers, polylines, polygons, circles, etc., using the Google
Maps JavaScript API.

html

CopyEdit

<!DOCTYPE html>

<html>

<head>

<title>Simple Overlay</title>

<script src="https://maps.googleapis.com/maps/api/js?
key=YOUR_API_KEY"></script>

<script>

function initMap() {

const center = { lat: 28.6139, lng: 77.2090 }; // New Delhi

const map = new google.maps.Map(document.getElementById("map"),


{

zoom: 10,

center: center,

});

// Add a marker

new google.maps.Marker({

position: center,

map: map,

title: "Hello Delhi!",

});
// Add a polygon

const triangleCoords = [

{ lat: 28.7, lng: 77.1 },

{ lat: 28.6, lng: 77.2 },

{ lat: 28.5, lng: 77.15 },

];

const polygon = new google.maps.Polygon({

paths: triangleCoords,

strokeColor: "#FF0000",

fillColor: "#FF0000",

fillOpacity: 0.35,

map: map,

});

</script>

</head>

<body onload="initMap()">

<div id="map" style="height:500px;width:100%;"></div>

</body>

</html>

b) Ground Overlays (Superimpose an image)

You can overlay a custom image (like a map, blueprint, or heatmap) tied to
geographical coordinates:

javascript

CopyEdit
const imageBounds = {

north: 28.75,

south: 28.5,

east: 77.3,

west: 77.0,

};

const overlay = new google.maps.GroundOverlay(

"https://yourdomain.com/your-image.png",

imageBounds

);

overlay.setMap(map);

This will place the image exactly over the defined lat/lng bounds on the map.

2. Using Google My Maps (No Coding)

If you want to quickly superimpose data without code, Google My Maps


allows you to:

 Upload CSV, XLSX, or KML files with locations.

 Draw shapes, lines, and markers.

 Add custom images.

You can create a map here: https://www.google.com/maps/d/

You might also like