IOS7 Geolocation Map Marker

Developer
Mike Fowler
Size
4,359 Kb
Views
34,408
  1. IOS7 Geolocation Map Marker Previews
  2. IOS7 Geolocation Map Marker HTML Codes
  3. IOS7 Geolocation Map Marker CSS Codes
  4. IOS7 Geolocation Map Marker JS Codes

How do I make an ios7 geolocation map marker?

Look, there you are! This is a simple map marker that you could use to indicate the user's current location on a map. The style is that of the new geolocation map marker in iOS7 and OSX Mavericks.. What is a ios7 geolocation map marker? How do you make a ios7 geolocation map marker? This script and codes were developed by Mike Fowler on 22 August 2022, Monday.

IOS7 Geolocation Map Marker Previews
IQ Test

IOS7 Geolocation Map Marker - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>iOS7 Geolocation Map 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! */ /* * Look, there you are! This is a simple map * marker that you could use to indicate the * user's current location on a map. The style * is that of the new geolocation map marker in * iOS7 and OSX Mavericks. * * Support: browser's that support CSS transitions, * transforms, animations, and support all of those things on psuedo elements. */
.marker { display: block; position: relative; width: 2em; height: 2em; background: #157efb; border-radius: 50%; animation: pulse 1s ease-in-out infinite alternate; box-shadow: 0 0 0 0.25em white, 0 0 3px rgba(0, 0, 0, 0.4);
}
.marker::after { content: ''; position: absolute; top: 50%; left: 50%; width: 4em; height: 4em; margin-left: -2em; margin-top: -2em; box-shadow: 0 0 0 1px white; border-radius: 50%; animation: sonar 2s linear infinite;
}
@keyframes pulse { 0% { transform: scale3d(0.8, 0.8, 0.8); } 100% { transform: scale3d(1, 1, 1); }
}
@keyframes sonar { 0% { transform: scale3d(0.5, 0.5, 0.5); opacity: 1; } 50%, 100% { transform: scale3d(1, 1, 1); opacity: 0; }
}
* { box-sizing: border-box;
}
body, html { height: 100%;
}
body { background-image: url(http://f.cl.ly/items/2q3N361g3X0i2j0t2y3N/Screen-Shot-2013-11-01-at-12.13.48-PM.jpg); background-size: cover; display: flex; flex: row nowrap; justify-content: center; align-items: center;
}
.marker { display: flex-item;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <i class="marker"><b class="sonar"></b></i> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

IOS7 Geolocation Map Marker - Script Codes CSS Codes

/* * Look, there you are! This is a simple map * marker that you could use to indicate the * user's current location on a map. The style * is that of the new geolocation map marker in * iOS7 and OSX Mavericks. * * Support: browser's that support CSS transitions, * transforms, animations, and support all of those things on psuedo elements. */
.marker { display: block; position: relative; width: 2em; height: 2em; background: #157efb; border-radius: 50%; animation: pulse 1s ease-in-out infinite alternate; box-shadow: 0 0 0 0.25em white, 0 0 3px rgba(0, 0, 0, 0.4);
}
.marker::after { content: ''; position: absolute; top: 50%; left: 50%; width: 4em; height: 4em; margin-left: -2em; margin-top: -2em; box-shadow: 0 0 0 1px white; border-radius: 50%; animation: sonar 2s linear infinite;
}
@keyframes pulse { 0% { transform: scale3d(0.8, 0.8, 0.8); } 100% { transform: scale3d(1, 1, 1); }
}
@keyframes sonar { 0% { transform: scale3d(0.5, 0.5, 0.5); opacity: 1; } 50%, 100% { transform: scale3d(1, 1, 1); opacity: 0; }
}
* { box-sizing: border-box;
}
body, html { height: 100%;
}
body { background-image: url(http://f.cl.ly/items/2q3N361g3X0i2j0t2y3N/Screen-Shot-2013-11-01-at-12.13.48-PM.jpg); background-size: cover; display: flex; flex: row nowrap; justify-content: center; align-items: center;
}
.marker { display: flex-item;
}

IOS7 Geolocation Map Marker - Script Codes JS Codes

(function() {
}).call(this);
IOS7 Geolocation Map Marker - Script Codes
IOS7 Geolocation Map Marker - Script Codes
Home Page Home
Developer Mike Fowler
Username mikefowler
Uploaded August 22, 2022
Rating 3.5
Size 4,359 Kb
Views 34,408
Do you need developer help for IOS7 Geolocation Map 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
Nickname generator
A Pen by Mike Fowler
Map Locator Marker
Coverflow
Rounded Avatar
Navigation Indicator
Image Markers
Mixtape
Page Transitions in Backbone
Create amazing sales emails 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!