Desi delight 2

2 nd prototype

by vinayaknb

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>

<meta name="viewport" content="width=device-width, initial-scale=1.0,...

JavaScript

var map;
    var latitude = 39.032969;
    var longitude = -94.578019;
    var accuracy = 100;
   // cache the userAgent
	var useragent = navigator.userAgent;

 map = new google.maps.Map(document.getElementById('map_canvas'), {
            zoom: 10,
            center: new google.maps.LatLng(latitude, longitude),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });
			
 var mapCanvas = document.getElementById('map_canvas');
 mapCanvas.style.width = mapCanvas.style.height = '100%';

 getCurrentGeoLocation();


    function init() {
       
     
        var request = {
            location: new google.maps.LatLng(latitude, longitude),
            radius: 50000,
            types: ['hindu_temple']
        };

        infowindow = new google.maps.InfoWindow();
        var service = new google.maps.places.PlacesService(map);
        service.nearbySearch(request, callback);



     
    }

    function callback(results, status) {
        //alert(status);
        if (status == google.maps.places.PlacesServiceStatus.OK) {
            for (var i = 0; i < results.length; i++) {
                createMarker(results[i]);
            }
        }
    }

    function createMarker(place) {
        //    alert(place);
        var placeLoc = place.geometry.location;

        var image = {
            url: place.icon,
            size: new google.maps.Size(71, 71),
            origin: new google.maps.Point(0, 0),
            anchor: new google.maps.Point(17, 34),
            scaledSize: new google.maps.Size(25, 25)
        };

        var marker = new google.maps.Marker({
            icon: image,
            map: map,
            position: place.geometry.location
        });

        google.maps.event.addListener(marker, 'click', function () {
            infowindow.setContent(place.name);
            infowindow.open(map, this);
        });
    }


    function getCurrentGeoLocation() {
     // alert("getCurrentGeoLocation") ;
    
    		// allow iPhone or Android to...