You Are Here (with Safari on iPhone)

Created by Steve Stedman on 2009-06-18: http://plebeosaur.us/you-are-here-with-safari-on-iphone/

by Ryan Connolly

HTML

<div id="map_canvas"><!-- map goes here --></div>

CSS

/* your custom CSS \*/
	@-moz-keyframes pulsate {
		from {
			-moz-transform: scale(0.25);
			opacity: 1.0;
		}
		95% {
			-moz-transform: scale(1.3);
			opacity: 0;
		}
		to {
			-moz-transform: scale(0.3);
			opacity: 0;
		}
	}
	@-webkit-keyframes pulsate {
		from {
			-webkit-transform: scale(0.25);
			opacity: 1.0;
		}
		95% {
			-webkit-transform: scale(1.3);
			opacity: 0;
		}
		to {
			-webkit-transform: scale(0.3);
			opacity: 0;
		}
	}
	/* get the container that's just outside the marker image, 
		which just happens to have our Marker title in it */
	#map_canvas div.gmnoprint[title="I might be here"] {
		-moz-animation: pulsate 1.5s ease-in-out infinite;
		-webkit-animation: pulsate 1.5s ease-in-out infinite;
		border:1pt solid #fff;
		/* make a circle */
		-moz-border-radius:51px;
		-webkit-border-radius:51px;
		border-radius:51px;
		/* multiply the shadows, inside and outside the circle */
		-moz-box-shadow:inset 0 0 5px #06f, inset 0 0 5px #06f, inset 0 0 5px #06f, 0 0 5px #06f, 0 0 5px #06f, 0 0 5px #06f;
		-webkit-box-shadow:inset 0 0 5px #06f, inset 0 0 5px #06f, inset 0 0 5px #06f, 0 0 5px #06f, 0 0 5px #06f, 0 0 5px #06f;
		box-shadow:inset 0 0 5px #06f, inset 0 0 5px #06f, inset 0 0 5px #06f, 0 0 5px #06f, 0 0 5px #06f, 0 0 5px #06f;
		/* set the ring's new dimension and re-center it */
		height:51px!important;
		margin:-18px 0 0 -18px;
		width:51px!important;
	}
	/* hide the superfluous marker image since it would expand and shrink with its containing element */
/*	#map_canvas div[style*="987654"][title] img {*/
	#map_canvas div.gmnoprint[title="I might be here"] img {
		display:none;
	}
	/* compensate for iPhone and Android devices with high DPI, add iPad media query */
	@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (device-width: 768px) {
		#map_canvas div.gmnoprint[title="I might be here"] {
			margin:-10px 0 0 -10px;
		}
	}

</style>
<!-- access to the HEAD element -->
<script...

JavaScript

/* 
		DEMO FILE FOR: You Are Here (with Safari on iPhone)
		Created by Steve Stedman on 2009-06-18: http://plebeosaur.us/you-are-here-with-safari-on-iphone/
		Updated on 2010-02-24: http://plebeosaur.us/iphone-safari-geolocation-map-update/
		Updated on 2011-10-30: http://plebeosaur.us/here-we-are-again/
	*/
	window.plebeosaur = window.plebeosaur || {
		map: function() {
			var	// get the page's canvas container
				mapCanvas = document.getElementById( 'map_canvas' ),
				// define the Google Maps options
				map_options = {
					zoom: 17,
					// let's initially center on downtown Austin
					center: new google.maps.LatLng( 30.264664, -97.747378 ),
					mapTypeId: google.maps.MapTypeId.ROADMAP
				},
				// then create the map
				map = new google.maps.Map( mapCanvas, map_options ),
				
				myMarker = 0,
				displayLocation = function( position ) {
					// create a new LatLng object for every position update
					var myLatLng = new google.maps.LatLng( position.coords.latitude, position.coords.longitude );

					// build entire marker first time thru
					if ( !myMarker ) {
						// define our custom marker image
						var image = new google.maps.MarkerImage(
							'http://plebeosaur.us/etc/map/bluedot_retina.png',
							null, // size
							null, // origin
							new google.maps.Point( 8, 8 ), // anchor (move to center of marker)
							new google.maps.Size( 17, 17 ) // scaled size (required for Retina display icon)
						);

						// then create the new marker
						myMarker = new google.maps.Marker({
							flat: true,
							icon: image,
							map: map,
							optimized: false,
							position: myLatLng,
							title: 'I might be here',
							visible: true
						});
					
					// just change marker position on subsequent passes
					} else {
						myMarker.setPosition( myLatLng );
					}

					// center map view on every pass
					map.setCenter( myLatLng );
				},
				handleError = function( error ) {
					var errorMessage = [ 
						'We are not quite...