Custom Google Maps

Developer
Toby
Size
4,131 Kb
Views
6,072
  1. Custom Google Maps Previews
  2. Custom Google Maps HTML Codes
  3. Custom Google Maps CSS Codes
  4. Custom Google Maps JS Codes

How do I make an custom google maps?

Dribble Inspiration: https://dribbble.com/shots/1603413-Cody-Custom-Pages Map Source: http://codyhouse.co/gem/custom-google-map/. What is a custom google maps? How do you make a custom google maps? This script and codes were developed by Toby on 24 January 2023, Tuesday.

Custom Google Maps Previews
IQ Test

Custom Google Maps - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Custom Google Maps</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel='stylesheet prefetch' href='https://meyerweb.com/eric/tools/css/reset/reset.css'>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Lora'>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <html lang="en" class="no-js">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href='https://fonts.googleapis.com/css?family=Lora' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/reset.css"> <!-- CSS reset --> <link rel="stylesheet" href="css/style.css"> <!-- Resource style --> <script src="js/modernizr.js"></script> <!-- Modernizr --> <title>Custom Google Map</title>
</head>
<html lang="en">
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"> <title>Custom Google Map</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"> <title itemprop="name">Toby Dennison</title> <meta name="description" content="Using the Google Maps API to create a custom map for the location of the Vintage Cafe.">
</head>
<body> <section id="cd-google-map"> <div id="google-container"></div> <div id="cd-zoom-in"></div> <div id="cd-zoom-out"></div> </section> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDVhlOeacsAUSoFAsBzQZPjf2jHpT0x8MI"></script> <script src="js/main.js"></script> <!-- Resource jQuery -->
</body>
</html> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Custom Google Maps - Script Codes CSS Codes

/* --------------------------------
Primary style
-------------------------------- */
html * { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /*cursor: none; /* Whilst taking screenshots, uncomment this line to hide the mouse cursor. */
}
*,
*:after,
*:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
/* --------------------------------
Main components
-------------------------------- */
#google-container { position: relative; width: 100%; height: 100vh; /* DEFAULT: 200px; */ background-color: #e7eaf0;
}
@media only screen and (min-width: 768px) { #google-container { /* height: 300px; DEFAULT! */ height: 100vh; }
}
@media only screen and (min-width: 1170px) { #google-container { /* height: 600px; DEFAULT! */ height: 100vh; }
}
#cd-google-map { position: relative;
}
#cd-zoom-in,
#cd-zoom-out { height: 32px; width: 32px; cursor: pointer; margin-left: 10px; background-color: rgba(211, 104, 104, 0.9); background-repeat: no-repeat; background-size: 32px 64px; background-image: url("https://codyhouse.co/demo/custom-google-map/img/cd-icon-controller.svg");
}
.no-touch #cd-zoom-in:hover,
.no-touch #cd-zoom-out:hover { background-color: #d36868;
}
@media only screen and (min-width: 768px) { #cd-zoom-in, #cd-zoom-out { margin-left: 50px; }
}
#cd-zoom-in { background-position: 50% 0; margin-top: 10px; margin-bottom: 1px;
}
@media only screen and (min-width: 768px) { #cd-zoom-in { margin-top: 50px; }
}
#cd-zoom-out { background-position: 50% -32px;
}

Custom Google Maps - Script Codes JS Codes

jQuery(document).ready(function($) { //set your google maps parameters var latitude = 53.754021, longitude = -0.373383, map_zoom = 14; //google map custom marker icon - .png fallback for IE11 var is_internetExplorer11 = navigator.userAgent.toLowerCase().indexOf('trident') > -1; var marker_url = (is_internetExplorer11) ? 'https://codyhouse.co/demo/custom-google-map/img/cd-icon-location.png' : 'https://codyhouse.co/demo/custom-google-map/img/cd-icon-location.svg'; //define the basic color of your map, plus a value for saturation and brightness var main_color = '#2d313f', saturation_value = -20, brightness_value = 5; //we define here the style of the map var style = [{ //set saturation for the labels on the map elementType: "labels", stylers: [{ saturation: saturation_value }] }, { //poi stands for point of interest - don't show these lables on the map featureType: "poi", elementType: "labels", stylers: [{ visibility: "off" }] }, { //don't show highways lables on the map featureType: 'road.highway', elementType: 'labels', stylers: [{ visibility: "off" }] }, { //don't show local road lables on the map featureType: "road.local", elementType: "labels.icon", stylers: [{ visibility: "off" }] }, { //don't show arterial road lables on the map featureType: "road.arterial", elementType: "labels.icon", stylers: [{ visibility: "off" }] }, { //don't show road lables on the map featureType: "road", elementType: "geometry.stroke", stylers: [{ visibility: "off" }] }, //style different elements on the map { featureType: "transit", elementType: "geometry.fill", stylers: [{ hue: main_color }, { visibility: "on" }, { lightness: brightness_value }, { saturation: saturation_value }] }, { featureType: "poi", elementType: "geometry.fill", stylers: [{ hue: main_color }, { visibility: "on" }, { lightness: brightness_value }, { saturation: saturation_value }] }, { featureType: "poi.government", elementType: "geometry.fill", stylers: [{ hue: main_color }, { visibility: "on" }, { lightness: brightness_value }, { saturation: saturation_value }] }, { featureType: "poi.sport_complex", elementType: "geometry.fill", stylers: [{ hue: main_color }, { visibility: "on" }, { lightness: brightness_value }, { saturation: saturation_value }] }, { featureType: "poi.attraction", elementType: "geometry.fill", stylers: [{ hue: main_color }, { visibility: "on" }, { lightness: brightness_value }, { saturation: saturation_value }] }, { featureType: "poi.business", elementType: "geometry.fill", stylers: [{ hue: main_color }, { visibility: "on" }, { lightness: brightness_value }, { saturation: saturation_value }] }, { featureType: "transit", elementType: "geometry.fill", stylers: [{ hue: main_color }, { visibility: "on" }, { lightness: brightness_value }, { saturation: saturation_value }] }, { featureType: "transit.station", elementType: "geometry.fill", stylers: [{ hue: main_color }, { visibility: "on" }, { lightness: brightness_value }, { saturation: saturation_value }] }, { featureType: "landscape", stylers: [{ hue: main_color }, { visibility: "on" }, { lightness: brightness_value }, { saturation: saturation_value }] }, { featureType: "road", elementType: "geometry.fill", stylers: [{ hue: main_color }, { visibility: "on" }, { lightness: brightness_value }, { saturation: saturation_value }] }, { featureType: "road.highway", elementType: "geometry.fill", stylers: [{ hue: main_color }, { visibility: "on" }, { lightness: brightness_value }, { saturation: saturation_value }] }, { featureType: "water", elementType: "geometry", stylers: [{ hue: main_color }, { visibility: "on" }, { lightness: brightness_value }, { saturation: saturation_value }] } ]; //set google map options var map_options = { center: new google.maps.LatLng(latitude, longitude), zoom: map_zoom, panControl: false, zoomControl: false, mapTypeControl: false, streetViewControl: false, mapTypeId: google.maps.MapTypeId.ROADMAP, scrollwheel: false, styles: style, } //inizialize the map var map = new google.maps.Map(document.getElementById('google-container'), map_options); //add a custom marker to the map var marker = new google.maps.Marker({ position: new google.maps.LatLng(latitude, longitude), map: map, visible: true, icon: marker_url, }); //add custom buttons for the zoom-in/zoom-out on the map function CustomZoomControl(controlDiv, map) { //grap the zoom elements from the DOM and insert them in the map var controlUIzoomIn = document.getElementById('cd-zoom-in'), controlUIzoomOut = document.getElementById('cd-zoom-out'); controlDiv.appendChild(controlUIzoomIn); controlDiv.appendChild(controlUIzoomOut); // Setup the click event listeners and zoom-in or out according to the clicked element google.maps.event.addDomListener(controlUIzoomIn, 'click', function() { map.setZoom(map.getZoom() + 1) }); google.maps.event.addDomListener(controlUIzoomOut, 'click', function() { map.setZoom(map.getZoom() - 1) }); } var zoomControlDiv = document.createElement('div'); var zoomControl = new CustomZoomControl(zoomControlDiv, map); //insert the zoom div on the top left of the map map.controls[google.maps.ControlPosition.LEFT_TOP].push(zoomControlDiv);
});
Custom Google Maps - Script Codes
Custom Google Maps - Script Codes
Home Page Home
Developer Toby
Username tobydennison
Uploaded January 24, 2023
Rating 3
Size 4,131 Kb
Views 6,072
Do you need developer help for Custom Google Maps?

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!

Toby (tobydennison) Script Codes
Name
BPL Table
Visual Studio Editor Mockup
Windows 8 Style Tile Navigation
Angular Markdown Preview
Google reCaptcha Setup
A Pen by Toby
BxSlider.js Setup
JQuery Christmas Snow
Code Editor Landing Page
BPL Table by Toby
Create amazing Facebook ads 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!