Home Web Development JavaScript JavaScript Google Map Marker With CSS | Custom API Map Controls

JavaScript Google Map Marker With CSS | Custom API Map Controls

July 10, 2019

15781

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 CSS, A 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>

<!DOCTYPE html>

<head>

<title>CSS Custom Marker On Map | Webdevtrick.com</title>

</head>

<body>

</span>

</span>

</span>

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

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

</select>

</div>

</body>

</html>

style.css

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

/** 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;
}

/** 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 );
});

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

/**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. If you have any doubt or question comment down below.

Thanks For Visiting, Keep Visiting.

5 COMMENTS

ANANT PRATAP SINGH July 11, 2019 At 6:06 am

I have two questions in php :
1) When user enter the information the userid should create unique id like user_001, user_002 …….. into the database.
2) When the data is entered into the system, it should create a unique ID of the person
which should have the format : STATE-CITY-4 Digit Unique Number
Example : If we have entered the details as following
City – Jaipur, State – Rajasthan
So unique ID should be generated as RAJ-JAI-7777
Please provide me code.

Reply
- shaan July 11, 2019 At 2:33 pm
  
  I will give you soon.
  
  Reply
Meghraj Gurjar July 11, 2019 At 11:45 am

This Website all Article and New Launch Information Is Very Nice

Reply
Miranda Nova September 24, 2019 At 4:27 pm

Thanks for sharing this code. Was looking for something like this only. Just a question, is there a possibility that if I click on the marker then it pops up further information as a popup? That’d really help as I was trying to make this work and that would add a lot of value in this code. Cheers!

Reply
Koh Zheng Liang April 18, 2022 At 10:38 am

hi can i ask something

Reply