<html>
<head>
<title>Google Map</title>
<style>
@keyframes pulsate {
0% {
transform: scale(0.1);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
transform: scale(1.2);
opacity: 0;
}
}
.pin {
width: 10px;
height: 10px;
position: relative;
top: 10px;
left: 8px;
/*background-color:red;*/
/*background: rgba(255, 0, 0, 1);*/
border: 4px solid #FFF;
border-radius: 50%;
z-index: 1000;
}
.pin-effect {
width: 35px;
height: 35px;
position: absolute;
top: 0;
display: block;
background: rgba(255, 0, 0, 0.6);
border-radius: 50%;
opacity: 0;
animation: pulsate 1s ease-out infinite;
}
</style>
</head>
<body onload="myMap()">
<h1>Google Map with Marker Pulses</h1>
<div id="googleMap" style="width:100%;height:400px;"></div>
<script>
//How to create a google map with marker and onclick marker info window
function myMap() {
var mapProp = {
center: new google.maps.LatLng(12.97, 77.59),
zoom: 5,
};
var mymap = new google.maps.Map(document.getElementById("googleMap"), mapProp);
var myLatlng1 = new google.maps.LatLng(12.9716, 77.5946);
var marker1 = new RichMarker({
map: mymap,
position: myLatlng1,
draggable: false,
flat: true,
anchor: RichMarkerPosition.MIDDLE,
content: '<div style="background-color:red" class="pin"></div><div style="background-color:red;" class="pin-effect"></div>'
});
google.maps.event.addListener(marker1, "mouseover", function (e) {
var infoWindow = new google.maps.InfoWindow();
infoWindow.setContent('Alert Name: <b> Hi</b> <br\>Alert Category: <b>Helow</b></br></br><a target="_blank" href="#">More Details</a>');
infoWindow.open(mymap, marker1);
});
}
</script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places&geometry&key=Your Key&v=3&"></script>
<script src="https://cdn.jsdelivr.net/npm/rich-marker@0.0.1/index.js"></script>
</body>
</html>
<head>
<title>Google Map</title>
<style>
@keyframes pulsate {
0% {
transform: scale(0.1);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
transform: scale(1.2);
opacity: 0;
}
}
.pin {
width: 10px;
height: 10px;
position: relative;
top: 10px;
left: 8px;
/*background-color:red;*/
/*background: rgba(255, 0, 0, 1);*/
border: 4px solid #FFF;
border-radius: 50%;
z-index: 1000;
}
.pin-effect {
width: 35px;
height: 35px;
position: absolute;
top: 0;
display: block;
background: rgba(255, 0, 0, 0.6);
border-radius: 50%;
opacity: 0;
animation: pulsate 1s ease-out infinite;
}
</style>
</head>
<body onload="myMap()">
<h1>Google Map with Marker Pulses</h1>
<div id="googleMap" style="width:100%;height:400px;"></div>
<script>
//How to create a google map with marker and onclick marker info window
function myMap() {
var mapProp = {
center: new google.maps.LatLng(12.97, 77.59),
zoom: 5,
};
var mymap = new google.maps.Map(document.getElementById("googleMap"), mapProp);
var myLatlng1 = new google.maps.LatLng(12.9716, 77.5946);
var marker1 = new RichMarker({
map: mymap,
position: myLatlng1,
draggable: false,
flat: true,
anchor: RichMarkerPosition.MIDDLE,
content: '<div style="background-color:red" class="pin"></div><div style="background-color:red;" class="pin-effect"></div>'
});
google.maps.event.addListener(marker1, "mouseover", function (e) {
var infoWindow = new google.maps.InfoWindow();
infoWindow.setContent('Alert Name: <b> Hi</b> <br\>Alert Category: <b>Helow</b></br></br><a target="_blank" href="#">More Details</a>');
infoWindow.open(mymap, marker1);
});
}
</script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places&geometry&key=Your Key&v=3&"></script>
<script src="https://cdn.jsdelivr.net/npm/rich-marker@0.0.1/index.js"></script>
</body>
</html>
0 Comments