Custom Google Map Marker Controls with JavaScript and CSS

In this Tutorial, we learn that How you can add a Custom google map marker and controls using CSS and Javascript?
there are many Tours and travels website you can see the custom markers on the map, they show all destination points using those markers on the map. I have you have seen if not seen don’t worry I will be discussed in these tutorials.

you can create custom google map marker online because there are many online websites are available, but here we can also create own using the Google map’s API, for developers google provides the many kinds of API on its cloud platform.

To find Map icon or other icon visit ICONFINDER Website https://www.iconfinder.com

Therefore, with the help of google map’s API, you will learn to add a custom marker on the map with your choosing place. for creating custom google map marker I am using CSS and jQuery and jQuery Migrate.

I hope you know very well jquery is a JavaScript library. this program is very useful for customers or visitors, suppose that you have the hotel and travels business booking site & you want to show all the places where your hotel exit, therefore this program is very important and useful for your hotel business. this program marker will place on given latitude and longitude.

It also has full-screen buttons, center, Zooms out, Zooms in. one more thing is there is also have an option bar to choosing the Satellite view or road view. suppose that if you want to change the marker to other places, then you have just change the latitude & longitude.

Explanation of Source code For custom Google Map Marker

Lets’ discuss the code segment given below, as you know I am discussed with you I have used API, which runs the whole map functions, here I have used an image icon for presenting the marker’s icon, after that placed on the chosen address in the map.

Therefore for placing the marker icon here, I have created variables for the functions like the whole icon, long, lat, map, etc. see the code segment for understanding the above things.

Therefore, all functions inbuild like choosing satellite view or road map view, focus center, zoom are done by google’s provided API commands. here, one thing notices that there is another function when you click on the marker then it’s open in a new tab.

if you don’t want these functions then you can be removing the code in JS file, you can see in the javascript file I have left a comment on every function’s code sections. you can easily find the JS code is for your decided part.

Stylesheet For Map Maker

In the CSS section, for styling, I have placed all the things you can see the “stylesheet.css” everything manages like positioning, color, margin, padding, etc are handled by CSS. here also I have used Marker font

Therefore for icons button created with the help of Font-Awesome icons. I hope you have good knowledge of HTML, CSS, JavaScript then you can understand better. If you don’t have a better knowledge of JavaScript don’t worry, JS code is looking tough but trusts me that all are default functions of API.

I have Called API function in the right place. when you using code segment in your website or project you need to change the latitude and longitude on the JS file. For creating these program you have to need to create three files. First for creating HTML file as name “index.html”, second for CSS file as name “stylesheet.css” and third file create javascript file name as “functions.js”

Step:1 Create HTML File as name “index.html” and Put the code segment

<!DOCTYPE html>
<html lang="en" >
 <head>
  <meta charset="UTF-8">
  <title>Custom google map marker and controls</title>
  <link rel="stylesheet" href="css/stylesheet.css">
  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
 </head>
<body>
 
  <div class="full-screen">
  <div id="map" class="map"></div>
        <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://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='https://maps.googleapis.com/maps/api/js?key=AIzaSyCLFomDOPKqvvITt7tv_hZG0PDlWB2-q0g'></script>
  <script  src="JS/function.js"></script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Custom google map marker and controls</title>

</head>

<body>

</span>

</span>

</span>

<option value="1">Roadmap</option>

<option value="2">Satellite</option>

</select>

</div>

</body>

</html>

Step: II Create CSS File as name stylesheet.css and put the code segment

html,
body {
  
  height: 100%;
  padding: 0;
  margin: 0;
}
.full-screen {
  width: 100%;
  position: relative;
  height: 100%;
}

.full-screen .btn {
  background-color: white;
  border: 0;
  border-radius: 2px;
  cursor: pointer;
  transition: all 300ms ease-in-out;
  box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.1);
  
}
.full-screen .map {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: absolute;
  }

.full-screen .btn.zoom.in {
  margin-top: -37px;
  top: 50%;
}
.full-screen .btn.zoom.center {
  margin-top: -87px;
  top: 50%;
}

.full-screen .btn.zoom.out {
  margin-bottom: -37px;
  bottom: 50%;
}
.full-screen .btn.zoom {
  color: #39d013;
  font-size: 20px;
  padding: 5px 8px;
  position: absolute;
  right: 20px; 
}
.full-screen .btn.zoom:hover,
.full-screen .btn.zoom:active {
  background-color: #00e651;
  color: white;
}
.full-screen .btn.zoom:active {
  opacity: 0.75;
}
.full-screen .mapTypeId {
  width: 90px;
  top: 20px;
  left: 5px;
  background-color: #e6df00;
  position: absolute;
  border-radius: 2px;
  overflow: hidden;
  color: white;
  box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.1);
  padding: 8px 0;
}
.full-screen .mapTypeId select {
  width: 100%;
  background-color: #a6b90a;
  padding: -1px;
  position: relative;
  top: -2px;
  background-image: none;
  color: white;
  font-weight: 700;
  text-indent: 10px;
  text-transform: uppercase;
  border: none;
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
.full-screen .mapTypeId select:focus {
  outline: none;
}

html,

body {

height: 100%;

padding: 0;

margin: 0;

}

.full-screen {

width: 100%;

position: relative;

height: 100%;

}

.full-screen .btn {

background-color: white;

border: 0;

border-radius: 2px;

cursor: pointer;

transition: all 300ms ease-in-out;

box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.1);

}

.full-screen .map {

top: 0;

bottom: 0;

left: 0;

right: 0;

position: absolute;

}

.full-screen .btn.zoom.in {

margin-top: -37px;

top: 50%;

}

.full-screen .btn.zoom.center {

margin-top: -87px;

top: 50%;

}

.full-screen .btn.zoom.out {

margin-bottom: -37px;

bottom: 50%;

}

.full-screen .btn.zoom {

color: #39d013;

font-size: 20px;

padding: 5px 8px;

position: absolute;

right: 20px;

}

.full-screen .btn.zoom:hover,

.full-screen .btn.zoom:active {

background-color: #00e651;

color: white;

}

.full-screen .btn.zoom:active {

opacity: 0.75;

}

.full-screen .mapTypeId {

width: 90px;

top: 20px;

left: 5px;

background-color: #e6df00;

position: absolute;

border-radius: 2px;

overflow: hidden;

color: white;

box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.1);

padding: 8px 0;

}

.full-screen .mapTypeId select {

width: 100%;

background-color: #a6b90a;

padding: -1px;

position: relative;

top: -2px;

background-image: none;

color: white;

font-weight: 700;

text-indent: 10px;

text-transform: uppercase;

border: none;

box-shadow: none;

appearance: none;

-webkit-appearance: none;

-moz-appearance: none;

}

.full-screen .mapTypeId select:focus {

outline: none;

}

Step: III Create the JavaScript File as name function.js and put the code

$(document).ready(function() {
  
  var map;
  var marker;
  var lat = 40.747151;
  var lng = -73.8538547;
  var ico = new google.maps.MarkerImage("https://www.tutorialscan.com/wp-content/uploads/2019/08/location-icon.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 );
});

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

$(document).ready(function() {

var map;

var marker;

var lat = 40.747151;

var lng = -73.8538547;

var ico = new google.maps.MarkerImage("https://www.tutorialscan.com/wp-content/uploads/2019/08/location-icon.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 );

});

Note: You can change the file name as per according to your choice.
As a result, follow the code segment to create the Custom Google Map Marker. you will be created successfully .if you have to face any trouble then comment me down below. I will try to resolve the problem as soon as possible. thanks for viewing these posts.

Custom Google Map Marker Controls with JavaScript and CSS

Explanation of Source code For custom Google Map Marker

Stylesheet For Map Maker

Step:1 Create HTML File as name “index.html” and Put the code segment

Step: II Create CSS File as name stylesheet.css and put the code segment

Step: III Create the JavaScript File as name function.js and put the code

Related Posts

About Author

admin