├── .gitattributes ├── README.md ├── castle.svg ├── ghosthouse.svg ├── hill_with_eyes.svg ├── index.html ├── pipe.svg ├── pointer.svg ├── script.js ├── star.svg ├── style.css └── yoshi_house.svg /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Building a Super Mario themed Google map! 2 | 3 | This project will show you how to build a custom styled Google map using the Google Cloud Platform and the Google Maps JavaScript API. 4 | 5 | Check out the [full project](https://www.codementor.io/projects/build-a-custom-google-maps-theme-bf8levr6eg) on DevProjects by Codementor. 6 | 7 | ## Instructions 8 | 9 | The code here requires a Google Cloud Platform API key and a Google Maps custom Map ID in order to work. 10 | 11 | The places that need updating are: 12 | 13 | * Add the API_KEY and MAP_ID in the ` 18 | 19 | 20 | 22 | 23 | -------------------------------------------------------------------------------- /pipe.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /pointer.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | function initMap() { 2 | // Update MAP_ID with custom map ID 3 | map = new google.maps.Map(document.getElementById('map'), { 4 | center: { 5 | lat: 34.66767774804736, 6 | lng: 135.43076145097373, 7 | }, 8 | zoom: 18, 9 | mapId: 'MAP_ID', 10 | mapTypeControl: false, 11 | fullscreenControl: false, 12 | streetViewControl: false, 13 | }); 14 | 15 | // Name 16 | // Latitude, Longitude 17 | // Image URL 18 | // scaledSize width, height 19 | const markers = [ 20 | [ 21 | "Yoshi's House", 22 | 34.66669734177897, 23 | 135.4309054875526, 24 | 'yoshi_house.svg', 25 | 38, 26 | 31, 27 | ], 28 | [ 29 | 'You Are Here', 30 | 34.66767112713121, 31 | 135.4297887322531, 32 | 'pointer.svg', 33 | 30, 34 | 47.8, 35 | ], 36 | [ 37 | 'Ghost House', 38 | 34.66832715150856, 39 | 135.43292762674864, 40 | 'ghosthouse.svg', 41 | 40, 42 | 48, 43 | ], 44 | ['Castle', 34.66775608022106, 135.43139547897843, 'castle.svg', 40, 53], 45 | ['Warp Pipe', 34.66739738878135, 135.43225049775214, 'pipe.svg', 38, 42.5], 46 | ['Star World', 34.667959023359266, 135.42866400953733, 'star.svg', 38, 38], 47 | [ 48 | 'Donut Plains', 49 | 34.66830355359945, 50 | 135.4320565322381, 51 | 'hill_with_eyes.svg', 52 | 50, 53 | 60.7, 54 | ], 55 | [ 56 | 'Donut Plains', 57 | 34.66829411443392, 58 | 135.43231361996433, 59 | 'hill_with_eyes.svg', 60 | 50, 61 | 60.7, 62 | ], 63 | [ 64 | 'Donut Plains', 65 | 34.6683781779677, 66 | 135.43217016043528, 67 | 'hill_with_eyes.svg', 68 | 50, 69 | 60.7, 70 | ], 71 | ]; 72 | 73 | for (let i = 0; i < markers.length; i++) { 74 | const currMarker = markers[i]; 75 | 76 | const marker = new google.maps.Marker({ 77 | position: { lat: currMarker[1], lng: currMarker[2] }, 78 | map, 79 | title: currMarker[0], 80 | icon: { 81 | url: currMarker[3], 82 | scaledSize: new google.maps.Size(currMarker[4], currMarker[5]), 83 | }, 84 | animation: google.maps.Animation.DROP, 85 | }); 86 | 87 | const infowindow = new google.maps.InfoWindow({ 88 | content: currMarker[0], 89 | }); 90 | 91 | marker.addListener('click', () => { 92 | infowindow.open(map, marker); 93 | }); 94 | } 95 | } 96 | -------------------------------------------------------------------------------- /star.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | html { 2 | box-sizing: border-box; 3 | font-size: 100%; 4 | } 5 | 6 | *, *::before, *::after { 7 | box-sizing: inherit; 8 | } 9 | 10 | body { 11 | margin: 0; 12 | padding: 0; 13 | background-color: #000000; 14 | color: #ffffff; 15 | } 16 | 17 | h1 { 18 | font-family: 'Press Start 2P', cursive; 19 | text-align: center; 20 | font-size: 2rem; 21 | padding: 0 3rem; 22 | } 23 | 24 | #map { 25 | height: 75vh; 26 | } 27 | 28 | .gm-style-iw-d { 29 | color: #000000; 30 | } 31 | 32 | -------------------------------------------------------------------------------- /yoshi_house.svg: -------------------------------------------------------------------------------- 1 | --------------------------------------------------------------------------------