Map Custom Marker and Controls | JavaScript, CSS and API

Map Custom Marker and Controls | JavaScript, CSS and API

How we can add a custom marker on google map using JavaScript & CSS? Solution: JavaScript Google Map Marker With CSS, Custom API Map Controls.

Maybe you have seen custom markers on the map on some tour & travels websites. They show their all destination using those markers on the map. There are many online websites or services for creating custom markers, but we can also create those own using google map’s API. Google provides many kinds of API for developers on its Cloud Platform.

Today you will learn to add a custom marker on the map with your choosing place. This possible because of API, I am using jQuery & jQuery-Migrate for this program. As you know jQuery is a JavaScript library that’s why I am calling this a JavaScript Custom Map Marker Program. Suppose you have an online hotel booking site & you want to show all the places where your hotel is, then this will very useful for you.

So, Today I am sharing JavaScript Google Map Marker With CSSA Custom API Map Controls With JS & CSS. This program marker will place on given longitude & latitude. Its also has zoom in, zoom out, center, & full-screen buttons. There also is an option bar to choosing road view or satellite view. If you want to change the marker to other places, then you have just change the longitude & latitude.

If you are thinking now how this custom map marker actually is, then see the preview given below.

Preview Of Custom API Map Control

See this video preview to getting an idea of how this custom map with marker looks like.


Now you can see this visually. If you like this then get the source code of its.

Discussion

Before sharing source code, let’s talk about this. As you know I have used API, that runs the whole map’s function. I have used an image for the marker’s icon, after that placed on the chosen address in map. For placing the marker I have created some variables for the functions like whole map, long, lat, icon, etc.

All the functions like zoom, focus center, choosing satellite or road view are done by google’s provided API commands. There is another function is when you will click on the marker then the address will open in a new tab. You can remove this feature by removing the code in JS file, I have left a comment on every function’s code section. You can easily identify the codes are for your decided part.

In the CSS section, I have placed all the things you can see on the preview. Works like managing colors, positioning, etc are handled by CSS. As you can see all the buttons in the map are created using Font-Awesome icons. If you have good knowledge of HTML, CSS & JavaScript then you can understand the codes easily. These codes are looking tough but believe me that all are default functions of the API, I have just called on the right place.

For using it on your websites or project you just have to change the longitude & latitude on the JS file. If you get any trouble you can ask me on the comment section or direct message on the Facebook page.

JavaScript Google Map Marker With CSS Source Code

For creating this program you have create 3 files. First for HTML, second for CSS, & third for JavaScript. Follow the steps to creating this without any error.

index.html

Create an HTML file named ‘index.html‘ and put these codes given below.

<!DOCTYPE html>
<!-- code by webdevtrick ( https://webdevtrick.com )-->
<html lang="en" >
 
<head>
  <meta charset="UTF-8">
  <title>CSS Custom Marker On Map | Webdevtrick.com</title>
  
  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
      <link rel="stylesheet" href="style.css">
</head>
 
<body>
 
  <div class="full-screen">
  <div id="map" class="map"></div>
 
    <!--controls-->
    <span id="zoomIn" class="btn zoom in">
        <i class="fa fa-plus"></i>
    </span>
    <span id="zoomOut" class="btn zoom out">
        <i class="fa fa-minus"></i>
    </span>
 
    <span id="center" class="btn zoom center">
        <i class="fa fa-crosshairs"></i>
    </span>
 
    <div class="mapTypeId">
        <select id="mapTypeId">
            <option value="1">Roadmap</option>
            <option value="2">Satellite</option>
        </select>
    </div>
 
</div>
  <script src='https://maps.googleapis.com/maps/api/js?key=AIzaSyCLFomDOPKqvvITt7tv_hZG0PDlWB2-q0g'></script>
<script src='https://code.jquery.com/jquery-1.11.3.min.js'></script>
<script src='https://code.jquery.com/jquery-migrate-1.2.1.min.js'></script>
 
    <script  src="function.js"></script>
 
</body>
</html>

style.css

Now create a CSS file named ‘style.css‘ and put these codes.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85

/** code by webdevtrick ( https://webdevtrick.com ) / html, body {   margin: 0;   padding: 0;   height: 100%; } .full-screen {   position: relative;   width: 100%;   height: 100%; } .full-screen .map {   position: absolute;   left: 0;   right: 0;   top: 0;   bottom: 0; } .full-screen .btn {   cursor: pointer;   border: 0;   border-radius: 2px;   background-color: white;   box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.1);   transition: all 300ms ease-in-out; } .full-screen .btn.zoom {   position: absolute;   right: 20px;   color: #e60023;   font-size: 20px;   padding: 5px 8px; } .full-screen .btn.zoom.in {   top: 50%;   margin-top: -37px; } .full-screen .btn.zoom.out {   bottom: 50%;   margin-bottom: -37px; } .full-screen .btn.zoom.center {   top: 50%;   margin-top: -87px; } .full-screen .btn.zoom:hover, .full-screen .btn.zoom:active {   color: white;   background-color: #e60023; } .full-screen .btn.zoom:active {   opacity: 0.75; } .full-screen .mapTypeId {   position: absolute;   top: 20px;   left: 5px;   border-radius: 2px;   background-color: #e60023;   box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.1);   width: 90px;   overflow: hidden;   color: white;   padding: 8px 0; } .full-screen .mapTypeId select {   color: white;   text-indent: 10px;   text-transform: uppercase;   font-weight: 700;   width: 100%;   position: relative;   top: -2px;   border: none;   box-shadow: none;   background-color: #e60023;   background-image: none;   appearance: none;   -webkit-appearance: none;   -moz-appearance: none; } .full-screen .mapTypeId select:focus {   outline: none; }

function.js

The final step, Create a JavaScript file named ‘function.js‘ and put the codes.

/code by webdevtrick ( https://webdevtrick.com ) **/
$(document).ready(function() {

var map;
var marker;
var lat = 28.7407056;
var lng = 77.0577493;
var ico = new google.maps.MarkerImage("https://webdevtrick.com/wp-content/uploads/location.png");

var overlay = new google.maps.OverlayView();
overlay.draw = function() {};    

function initialize () {
    var mapCanvas = document.getElementById('map');
    var mapOptions = {
    zoom: 13,
    center: {
    lat: lat, 

     lng: lng }, mapTypeControl: false, zoomControl: false, panControl: false,         scaleControl: false,         streetViewControl: false,         scrollwheel: false }   map = new google.maps.Map( mapCanvas, mapOptions );   overlay.setMap(map);    ZoomControl(map);    addMarker(map);   
}   // Marker function addMarker ( map ) { marker = new google.maps.Marker({             map: map,             draggable: false,             icon: ico,             position: new google.maps.LatLng( lat, lng )         });           mouseOverHandler = function () {          showMarker(marker);         }         mouseClickHandler = function () {          clickMarker(lat, lng);         }           google.maps.event.addListener( marker, 'click', mouseClickHandler );         google.maps.event.addListener( marker, 'mouseover', mouseOverHandler ); }   // Marker Click function clickMarker ( lat, lng ) { var url = 'https://maps.google.com/maps?q='+lat+','+lng+'&z=18'; window.open(url, '_blank'); }   // Zoom function ZoomControl ( map ) { var zoomIn = document.getElementById('zoomIn'); var zoomOut = document.getElementById('zoomOut');   google.maps.event.addDomListener(zoomOut, 'click', function() { var currentZoomLevel = map.getZoom(); if(currentZoomLevel != 0){ map.setZoom(currentZoomLevel - 1);}     });   google.maps.event.addDomListener(zoomIn, 'click', function() { var currentZoomLevel = map.getZoom(); if(currentZoomLevel != 21){ map.setZoom(currentZoomLevel + 1);} }); }   // MapTypeId function TypeIdChange ( option ) { switch (option) {             case "1":                 map.setMapTypeId( google.maps.MapTypeId.ROADMAP );                 break;                case "2":                map.setMapTypeId( google.maps.MapTypeId.SATELLITE );                 break;             default:                 map.setMapTypeId( google.maps.MapTypeId.ROADMAP );         } } // center $( '#center' ).on( 'click', function () { map.setZoom( 13 ); map.setCenter(new google.maps.LatLng( lat, lng ) ); map.setMapTypeId( google.maps.MapTypeId.ROADMAP ); $( '#mapTypeId' ).val( "1" ).trigger('click'); });   // center $( '#center' ).on( 'click', function () { map.setZoom( 13 ); map.setCenter(new google.maps.LatLng( lat, lng ) ); map.setMapTypeId( google.maps.MapTypeId.ROADMAP ); $( '#mapTypeId' ).val( "1" ).trigger('click'); });   $( '#mapTypeId' ).change( function () { var self = $(this); TypeIdChange( self.val() ); });   google.maps.event.addDomListener( window, 'load', initialize );

That’s It. Now you have successfully created JavaScript Google Map Marker With CSS. In other words, A Custom API Based Map Controls Like add Marker, Zoom In & Out, etc.

Thanks For Visiting, Keep Visiting.

Originally published on https://webdevtrick.com

Angular 9 Tutorial: Learn to Build a CRUD Angular App Quickly

What's new in Bootstrap 5 and when Bootstrap 5 release date?

Brave, Chrome, Firefox, Opera or Edge: Which is Better and Faster?

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

JavaScript Table Filter or Search | How to add Filter In HTML CSS Table

How we can add a search or filter option in an HTML Table using ... Solution: JavaScript Table Filter or Search, Add Filter In HTML CSS Table.

How To Build A Captivating Presentation Using HTML, CSS, & JavaScript

Building beautiful presentations is hard. Often you're stuck with Keynote or PowerPoint, and the templates are extremely limited and generic. Well not anymore.

HTML5 and CSS3 Fundamentals - Learn HTML5 and CSS3 From Scratch

HTML5 and CSS3 Fundamentals - Learn HTML5 and CSS3 From Scratch, you'll learn the fundamentals of HTML5 & CSS3 programming. Tune in to learn concepts about web pages, CSS3 styles and HTML5 features.