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.
You May Also Like:
- JavaScript Countdown Timer
- Multi Step Form Using JS
- Search and Highlight Text
- Day and Night Mode Change
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.
|
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 |
<!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.
|
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 86 87 88 89 90 91 92 93 94 95 96 97 98 99 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.
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.
I will give you soon.
This Website all Article and New Launch Information Is Very Nice
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!
hi can i ask something