Hi Everybody,
First of all wish you a very happy Diwali.
In this blog we will discuss how to set custom image and label of marker on google map using Jquery.
First of all wish you a very happy Diwali.
In this blog we will discuss how to set custom image and label of marker on google map using Jquery.
Html and css code
<html>
<head>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
.labels {
color: white;
background-color: red;
font-family: "Lucida Grande", "Arial", sans-serif;
font-size: 10px;
text-align: center;
white-space: nowrap;
}
</head>
<title>Simple Map</title>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.9/src/markerwithlabel.js"></script>
<body>
<div id="map-canvas"></div>
</body>
Jquery Code
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644)
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var marker = new MarkerWithLabel({
position: new google.maps.LatLng(-34.397, 151.244),
map: map,
icon: "https://maps.gstatic.com/mapfiles/ms2/micons/marina.png",
draggable: true,
raiseOnDrag: true,
labelContent: "1",
labelAnchor: new google.maps.Point(-5, 35),
labelClass: "labels", // the CSS class for the label
labelInBackground: false
});
Output
If you face any problem in implement this, feel free to post your doubt in comment section.
No comments:
Post a Comment