Map Locator Marker

Developer
Size
4,026 Kb
Views
30,360

How do I make an map locator marker?

A simple single-element shape that you could use as the basis for a marker on Google Maps or Leaflet. The center point is a smidge below exact center, so feel free to try and compensate.. What is a map locator marker? How do you make a map locator marker? This script and codes were developed by Mike Fowler on 22 August 2022, Monday.

Map Locator Marker Previews

Map Locator Marker - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Map Locator Marker</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ .locator { box-sizing: border-box; position: relative; width: 2em; height: 3.5em; padding: 0.15em; border: 0.15em solid white; border-radius: 2em; background: rgba(255, 255, 255, 0.4);
}
.locator::before { content: ''; box-sizing: border-box; position: absolute; top: 50%; left: 50%; width: 1em; height: 1em; margin-top: -1em; margin-left: -0.5em; background: transparent; border: 0.2em solid #b6d239; border-radius: 50%; border-top-left-radius: 5%; transform: rotate(-135deg);
}
.locator::after { content: ''; box-sizing: border-box; position: absolute; bottom: 0.15em; left: 50%; height: 25%; width: 1.4em; margin-left: -0.7em; border: 0.15em solid white; border-radius: 0.1em 0.1em 2em 2em; background-image: linear-gradient(#999 0%, #999 25%, white 25%); background-size: 100% 40%; background-repeat: repeat-y;
}
html, body { height: 100%;
}
body { background: #555; display: flex; align-items: center; justify-content: center;
}
.map { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.5; background: url(http://maps.googleapis.com/maps/api/staticmap?center=Albany,+NY&zoom=13&scale=1&size=600x600&maptype=roadmap&sensor=false&format=png&visual_refresh=true) center center/cover; -webkit-filter: blur(3px);
}
.locator { display: flex-item; z-index: 20; font-size: 100px;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="locator"></div>
<div class="map"></div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Map Locator Marker - Script Codes CSS Codes

.locator { box-sizing: border-box; position: relative; width: 2em; height: 3.5em; padding: 0.15em; border: 0.15em solid white; border-radius: 2em; background: rgba(255, 255, 255, 0.4);
}
.locator::before { content: ''; box-sizing: border-box; position: absolute; top: 50%; left: 50%; width: 1em; height: 1em; margin-top: -1em; margin-left: -0.5em; background: transparent; border: 0.2em solid #b6d239; border-radius: 50%; border-top-left-radius: 5%; transform: rotate(-135deg);
}
.locator::after { content: ''; box-sizing: border-box; position: absolute; bottom: 0.15em; left: 50%; height: 25%; width: 1.4em; margin-left: -0.7em; border: 0.15em solid white; border-radius: 0.1em 0.1em 2em 2em; background-image: linear-gradient(#999 0%, #999 25%, white 25%); background-size: 100% 40%; background-repeat: repeat-y;
}
html, body { height: 100%;
}
body { background: #555; display: flex; align-items: center; justify-content: center;
}
.map { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.5; background: url(http://maps.googleapis.com/maps/api/staticmap?center=Albany,+NY&zoom=13&scale=1&size=600x600&maptype=roadmap&sensor=false&format=png&visual_refresh=true) center center/cover; -webkit-filter: blur(3px);
}
.locator { display: flex-item; z-index: 20; font-size: 100px;
}

Map Locator Marker - Script Codes JS Codes

(function() {
}).call(this);
Map Locator Marker - Script Codes
Map Locator Marker - Script Codes
Home Page Home
Developer Mike Fowler
Username mikefowler
Uploaded August 22, 2022
Rating 3
Size 4,026 Kb
Views 30,360
Do you need developer help for Map Locator Marker?

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!

Mike Fowler (mikefowler) Script Codes
Create amazing blog posts 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!