Map Locator Marker

Developer
Mike Fowler
Size
4,026 Kb
Views
30,345
  1. Map Locator Marker Previews
  2. Map Locator Marker HTML Codes
  3. Map Locator Marker CSS Codes
  4. Map Locator Marker JS Codes

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
IQ Test

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,345
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
Name
Coverflow Animation
Rounded Avatar
IOS7 Geolocation Map Marker
Page Transitions in Backbone
Nickname generator
Mixtape
Image Markers
Navigation Indicator
A Pen by Mike Fowler
Coverflow
Create amazing marketing copy 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!