-1
Je fais une animation de tampon dans google maps. quand je le lance dans mon web, ça ne marche pas. J'utilise javascript et php pour le faire.animation de tampon google maps ne montre pas
ceci est mon code php:
<html>
<head>
<title>Google Map</title>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyD21hdItqZ1Rba2uU8z9i922vPFp5DgdzE&sensor=false"></script>
<script type="text/javascript">
$(document).ready(function() {
var map;
var mycity = new google.maps.LatLng(51.5120, -0.12);
var bigOne = new google.maps.LatLng(51.5120, -0.12);
var smallOne = new google.maps.LatLng(51.5120, -0.12);
var options = {
zoom: 14,
center: mycity,
scaleControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map($('#map')[0], options);
var myCity = new google.maps.Circle({
center: bigOne,
radius: 150,
strokeColor: "#E16D65",
strokeWeight: 2,
fillColor: "#E16D65",
fillOpacity: 0
});
var smallcircle = new google.maps.Circle({
center: smallOne,
radius: 300,
strokeColor: "#E16D65",
strokeOpacity: 1,
strokeWeight: 2,
fillColor: "#E16D65",
fillOpacity: 0
});
myCity.setMap(map);
smallcircle.setMap(map);
});
</script>
<style type="text/css">
#animation {
position: relative;
width: 100%;
height: 200px;
background: #EEE;
}
#map {
height: 400px;
width: 100%;
}
.dot {
position: absolute;
top: 80px;
left: 150px;
background: #00C0FF;
box-shadow: 1px 0 2px 0 rgba(0, 0, 0, .5);
height: 0;
width: 0;
padding: 4px;
border-radius: 5000px;
}
.dot:before, .dot:after {
position: absolute;
content:" ";
border-radius: inherit;
height: 0px;
width: 0px;
box-shadow: 0 0 2px 2px #FF0000;
transform: translate(-50%, -50%);
animation: pulseInner 2s infinite ease-out;
}
.dot:after {
height: 7px;
width: 7px;
box-shadow: 0 0 4px 2px #FFFF00;
animation: pulseOuter 2s infinite ease-out;
}
@-webkit-keyframes {
0% {
height: 0;
width: 0;
opacity: 0;
}
20% {
opacity: 1
}
95% {
height: 125px;
width: 125px;
opacity: 0.25;
}
100% {
opacity: 0;
}
}
@-moz-keyframes {
0% {
height: 0;
width: 0;
opacity: 0;
}
20% {
opacity: 1
}
95% {
height: 125px;
width: 125px;
opacity: 0.25;
}
100% {
opacity: 0;
}
}
@keyframes pulseInner {
0% {
height: 0;
width: 0;
opacity: 0;
}
20% {
opacity: 1
}
95% {
height: 125px;
width: 125px;
opacity: 0.25;
}
100% {
opacity: 0;
}
}
@-webkit-keyframes {
0% {
height: 7px;
width: 7px;
opacity: 0;
}
20% {
opacity: 1
}
100% {
height: 250px;
width: 250px;
opacity: 0.25;
}
}
@-moz-keyframes {
0% {
height: 7px;
width: 7px;
opacity: 0;
}
20% {
opacity: 1
}
100% {
height: 250px;
width: 250px;
opacity: 0.25;
}
}
@keyframes pulseOuter {
0% {
height: 7px;
width: 7px;
opacity: 0;
}
20% {
opacity: 1
}
100% {
height: 250px;
width: 250px;
opacity: 0.25;
}
}
</style>
</head>
<body>
<div id="animation">
<div class="dot"></div>
</div>
<hr>
<div id="map"></div>
</body>
</html>
Je ne sais pas quel est le problème. il n'y a pas de résultat dans mon site. quelqu'un peut-il m'aider? merci