Step 1: Download Gmap3 plugin click here
Step 2: Create Google Api Key click here
Project Structure:
index.php
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<link type="text/css" rel="stylesheet" href="dist/examples/style.css"/>
<script type="text/javascript" src="src/gmap3.js"></script>
<title>GMap3 Plugin </title>
<body>
<div id="test" class="gmap3"></div>
<script>
$.gmap3(false);
function initMap() {
var center = [27.7172, 85.3240];
$('#test').gmap3({
zoom: 13,
center: center,
mapTypeId : google.maps.MapTypeId.ROADMAP
})
.marker(function (map) {
return {
position: map.getCenter(),
icon: 'http://maps.google.com/mapfiles/marker_green.png'
};
})
.on('click', function (marker, event) {
marker.setIcon('http://maps.google.com/mapfiles/marker_orange.png');
setTimeout(function () {
marker.setIcon('http://maps.google.com/mapfiles/marker_green.png');
}, 200);
})
;
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=<your api code>&callback=initMap">
</script>
</body>
</html>
Demo:
0 comments:
Post a Comment