Skip to content

Instantly share code, notes, and snippets.

@omgbbqhaxx
Created July 18, 2015 02:38
Show Gist options
  • Select an option

  • Save omgbbqhaxx/a02eb8a5d2e174d97040 to your computer and use it in GitHub Desktop.

Select an option

Save omgbbqhaxx/a02eb8a5d2e174d97040 to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Simple markers</title>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0;
padding: 0;
}
div.richMarkerDiv {
background-image: url('http://40.media.tumblr.com/6275b9b8e75ef9825a517d07d459de63/tumblr_nrnvr1pmsA1uwos2wo1_100.png');
width: 100px;
height: 130px;
}
.clickable {
cursor: pointer;
text-decoration: underline;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<script src="richmarker.js"></script>
<script type="text/javascript">
function mapify() {
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
zoom: 7,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var richMarkerHtml = '<div class="richMarkerDiv"><a target="_blank" href="http://fb.com/yasin.aktimur"><img style="position:relative;margin:10px;width:80px;height:80px;border-radius:40px;" src="https://igcdn-photos-h-a.akamaihd.net/hphotos-ak-xpf1/t51.2885-19/11187029_1600109200246735_967357275_a.jpg"></img></a></div>';
var marker = new RichMarker({
map: map,
flat: true,
position: new google.maps.LatLng(-25.363882,131.044922),
draggable: false,
content: richMarkerHtml
});
}
</script>
</head>
<body onload="mapify();">
<div id="map-canvas"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment