· 6 years ago · Oct 01, 2019, 03:40 PM
1<!DOCTYPE html>
2<html>
3 <head>
4 <title>Custom Markers</title>
5 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
6 <meta charset="utf-8">
7 <style>
8 /* Always set the map height explicitly to define the size of the div
9 * element that contains the map. */
10 #map {
11 height: 100%;
12 }
13 /* Optional: Makes the sample page fill the window. */
14 html, body {
15 height: 100%;
16 margin: 0;
17 padding: 0;
18 }
19 </style>
20 </head>
21 <body>
22 <div id="map"></div>
23 <script>
24 var map;
25 var mapEl = document.querySelector('#map');
26 var map = new google.maps.Map(mapEl, {
27 center: new google.maps.LatLng(39.8282, -98.5795),
28 zoom: 5
29});
30 function initMap() {
31 map = new google.maps.Map(
32 document.getElementById('map'),
33 {center: new google.maps.LatLng(39.8282, -98.5795), zoom: 4});
34
35 // Replace this with your URL.
36var TILE_URL = 'http://c.tile.stamen.com/watercolor/{z}/{x}/{y}.jpg';
37
38// Name the layer anything you like.
39var layerID = 'my_custom_layer';
40
41// Create a new ImageMapType layer.
42var layer = new google.maps.ImageMapType({
43 name: layerID,
44 getTileUrl: function(coord, zoom) {
45 console.log(coord);
46 var url = TILE_URL
47 .replace('{x}', coord.x)
48 .replace('{y}', coord.y)
49 .replace('{z}', zoom);
50 return url;
51 },
52 tileSize: new google.maps.Size(256, 256),
53 minZoom: 1,
54 maxZoom: 20
55
56 // Register the new layer, then activate it.
57map.mapTypes.set(layerID, layer);
58map.setMapTypeId(layerID);
59
60 var iconBase ='https://developers.google.com/maps/documentation/javascript/examples/full/images/';
61
62 var icons = {
63 info: {
64 icon: iconBase + 'info-i_maps.png'
65 }
66 };
67
68 var features = [
69 {
70 position: new google.maps.LatLng(39.8282, -98.5795),
71 type: 'info'
72 }
73 ];
74 // Create markers.
75 for (var i = 0; i < features.length; i++) {
76 var marker = new google.maps.Marker({
77 position: features[i].position,
78 icon: icons[features[i].type].icon,
79 map: map
80 });
81 };
82 }
83 </script>
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 </body>
87</html>