Skip to content

Instantly share code, notes, and snippets.

@Jignesh-Darji

Jignesh-Darji/how to display price label in Google Map.html

Created April 9, 2018 09:17
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Jignesh-Darji/11e311a2fc4d30e4283e346774e5e624 to your computer and use it in GitHub Desktop.
Save Jignesh-Darji/11e311a2fc4d30e4283e346774e5e624 to your computer and use it in GitHub Desktop.
Download ZIP
how to display price label in Google Map
Raw
how to display price label in Google Map.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>MarkerWithLabel Example</title>
<style type="text/css">
.labels {
margin-top:-3px;
padding: 5px;
position: absolute;
visibility: visible;
z-index: 1030;
}
.labels.active .inner {
background: cyan;
}
.labels.hover .inner {
background-color: yellow;
}
.labels .arrow{
border-top-color: green;
border-right-color: rgba(0,0,0,0);
border-bottom-color: rgba(0,0,0,0);
border-left-color: rgba(0,0,0,0);
border-width: 5px 5px 0;
bottom: 0;
left: 50%;
margin-left: -5px;
border-style: solid;
height: 0;
position: absolute;
width: 0;
}
.labels .inner{
background-color: green;
border-radius: 4px;
color: #FFFFFF;
max-width: 200px;
padding: 3px 8px;
text-align: center;
text-decoration: none;
}
.labels.active .arrow {
border-top-color: #00ffff;
border-right-color: rgba(0,255,255,0);
border-bottom-color: rgba(0,255,255,0);
border-left-color: rgba(0,255,255,0);
}
.labels.hover .arrow {
border-top-color: #ffff00;
border-right-color: rgba(255,255,0,0);
border-bottom-color: rgba(255,255,0,0);
border-left-color: rgba(255,255,0,0);
}
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3&amp;sensor=false"></script>
<script type="text/javascript" src="markerwithlabel.js"></script>
<script type="text/javascript">
function initMap() {
var latLng = new google.maps.LatLng(49.47805, -123.84716);
var homeLatLng = new google.maps.LatLng(49.47805, -123.84716);
var map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 12,
center: latLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var clickIcon = {
path: 'M8,0C3.400,0,0,3.582,0,8s8,24,8,24s8-19.582,8-24S12.418,0,8,0z M8,12c-2.209,0-4-1.791-4-4 s1.791-4,4-4s4,1.791,4,4S10.209,12,8,12z',
fillColor: "#000000",
fillOpacity: 1,
strokeColor: "#000000",
strokeWeight: 1,
labelOrigin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(9, 35),
};
var marker1 = new MarkerWithLabel({
position: homeLatLng,
icon:" ",
labelContent: "<div class='inner'>$425564K</div><div class='arrow'></div><div class='arrow'></div>",
map: map,
label:"$d",
labelAnchor: new google.maps.Point(35, 25),
labelClass: "labels", // the CSS class for the label
labelStyle: {opacity: 1.75}
});
var iw1 = new google.maps.InfoWindow({
content: "Home For Sale"
});
var iw2 = new google.maps.InfoWindow({
content: "Another Home For Sale"
});
google.maps.event.addListener(marker1, "mouseover", function (e) { iw1.open(map, this); });
google.maps.event.addListener(marker1, "mouseout", function (e) { iw1.close(); });
}
</script>
</head>
<body onload="initMap()">
<p>A basic example of markers with labels. Note that an information window appears whether you
click the marker portion or the label portion of the MarkerWithLabel. The two markers shown here
are both draggable so you can easily verify that markers and labels overlap as expected.</p>
<div id="map_canvas" style="height: 400px; width: 100%;"></div>
<div id="log"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment