· 6 years ago · Oct 01, 2019, 04:10 PM
1<!DOCTYPE html>
2<html>
3 <head>
4 <meta charset="utf-8">
5 <title>Demo</title>
6 <style>
7 /* styles */
8 html, body {
9 margin: 0;
10 padding: 0;
11 }
12 #map {
13 width: 100vw;
14 height: 100vh;
15 }
16 </style>
17 </head>
18 <body>
19
20 <div id="map"></div>
21
22 <script>
23 var TILE_URL = 'http://c.tile.stamen.com/watercolor/{z}/{x}/{y}.jpg';
24 var iconBase ='https://developers.google.com/maps/documentation/javascript/examples/full/images/';
25 var icons = {
26 info: {
27 icon: iconBase + 'info-i_maps.png'
28 }
29 };
30 var map;
31 var mapEl;
32 var layer;
33 var layerID = 'my-custom-layer';
34 window.initMap = function() {
35 // Select the element with id="map".
36 mapEl = document.querySelector('#map');
37
38 // Create a new map.
39 map = new google.maps.Map(mapEl, {
40 center: new google.maps.LatLng(39.8282, -98.5795),
41 zoom: 4
42 });
43
44 // Create a tile layer, configured to fetch tiles from TILE_URL.
45 layer = new google.maps.ImageMapType({
46 name: layerID,
47 getTileUrl: function(coord, zoom) {
48 console.log(coord);
49 var url = TILE_URL
50 .replace('{x}', coord.x)
51 .replace('{y}', coord.y)
52 .replace('{z}', zoom);
53 return url;
54 },
55 tileSize: new google.maps.Size(256, 256),
56 minZoom: 1,
57 maxZoom: 20
58 });
59
60
61
62 var mapOptions = {
63 zoom: 4,
64 center: new google.maps.LatLng(39.8282, -98.5795)
65 }
66 var map = new google.maps.Map(document.getElementById("map"), mapOptions);
67
68 // Place a draggable marker on the map
69 var marker = new google.maps.Marker({
70 position: new google.maps.LatLng(39.8282, -98.5795),
71 map: map,
72 draggable:true,
73 title:"Drag me!"
74 });
75
76
77
78 // Apply the new tile layer to the map.
79 map.mapTypes.set(layerID, layer);
80 map.setMapTypeId(layerID);
81 };
82 </script>
83
84 <!-- NOTE: The 'key' parameter should be replaced with your Google Maps API Key. -->
85 <script src="https://maps.googleapis.com/maps/api/js?callback=initMap&key="></script>
86
87 </body>
88</html>