chibaye/google-maps-html-marker.markdown

## google-maps-html-marker.markdown

      
    Raw
  

              google-maps-html-marker.markdown
            
          
    Google Maps html marker

A Pen by StudioKlik on CodePen.
License.

  
## index.html
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Google Maps JavaScript API v3 Example: Overlay Simple</title>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
  </head>
  <body onload="initialize()">
    <div id="map_canvas"></div>
  </body>
</html>

## script.js
var overlay;

function initialize() {
    var myLatLng = new google.maps.LatLng(44.73532729516236, 14.806330871582077);
    var mapOptions = {
        zoom: 14,
        center: myLatLng,
        mapTypeId: google.maps.MapTypeId.READMAP
    };

    var gmap = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

    function HTMLMarker(lat,lng){
        this.lat = lat;
        this.lng = lng;
        this.pos = new google.maps.LatLng(lat,lng);
    }

    HTMLMarker.prototype = new google.maps.OverlayView();
    HTMLMarker.prototype.onRemove= function(){}

    //init your html element here
    HTMLMarker.prototype.onAdd= function(){
        div = document.createElement('DIV');
        div.className = "arrow_box";
      div.innerHTML = "<img src='http://sve.hr/oglasnik/apartmani/male/vYfWhoqazs1-sItPo.jpg' alt=''>";
        var panes = this.getPanes();
        panes.overlayImage.appendChild(div);
    }

    HTMLMarker.prototype.draw = function(){
        var overlayProjection = this.getProjection();
        var position = overlayProjection.fromLatLngToDivPixel(this.pos);
        var panes = this.getPanes();
        panes.overlayImage.style.left = position.x + 'px';
        panes.overlayImage.style.top = position.y - 30 + 'px';
    }

    //to use it
    var htmlMarker = new HTMLMarker(44.73532729516236, 14.806330871582077);
    htmlMarker.setMap(gmap);

}

## style.css
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#map_canvas {
  height: 100%;
}
div.arrow_box{
  width:100px;
  height:100px;
  border-radius:50%;
  margin:-100px -50px;
  border:solid 5px #fff;
    color: red;
    cursor: pointer;
  overflow:hidden;
}
div.arrow_box img{
  min-width:100px;
  width:auto;
  max-height:100px;
  height:auto;
}

.arrow_box:after {
	top: 5px;
	left: 5px;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;


	border-color: rgba(136, 183, 213, 0);
	border-top-color: #fff;
	border-width: 20px;
	margin-left: -20px;
}
	<html>
	<head>
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
	<meta charset="utf-8">
	<title>Google Maps JavaScript API v3 Example: Overlay Simple</title>
	<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
	</head>
	<body onload="initialize()">
	<div id="map_canvas"></div>
	</body>
	</html>
	var overlay;

	function initialize() {
	var myLatLng = new google.maps.LatLng(44.73532729516236, 14.806330871582077);
	var mapOptions = {
	zoom: 14,
	center: myLatLng,
	mapTypeId: google.maps.MapTypeId.READMAP
	};

	var gmap = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

	function HTMLMarker(lat,lng){
	this.lat = lat;
	this.lng = lng;
	this.pos = new google.maps.LatLng(lat,lng);
	}

	HTMLMarker.prototype = new google.maps.OverlayView();
	HTMLMarker.prototype.onRemove= function(){}

	//init your html element here
	HTMLMarker.prototype.onAdd= function(){
	div = document.createElement('DIV');
	div.className = "arrow_box";
	div.innerHTML = "<img src='http://sve.hr/oglasnik/apartmani/male/vYfWhoqazs1-sItPo.jpg' alt=''>";
	var panes = this.getPanes();
	panes.overlayImage.appendChild(div);
	}

	HTMLMarker.prototype.draw = function(){
	var overlayProjection = this.getProjection();
	var position = overlayProjection.fromLatLngToDivPixel(this.pos);
	var panes = this.getPanes();
	panes.overlayImage.style.left = position.x + 'px';
	panes.overlayImage.style.top = position.y - 30 + 'px';
	}

	//to use it
	var htmlMarker = new HTMLMarker(44.73532729516236, 14.806330871582077);
	htmlMarker.setMap(gmap);

	}
	html, body {
	height: 100%;
	margin: 0;
	padding: 0;
	}

	#map_canvas {
	height: 100%;
	}
	div.arrow_box{
	width:100px;
	height:100px;
	border-radius:50%;
	margin:-100px -50px;
	border:solid 5px #fff;
	color: red;
	cursor: pointer;
	overflow:hidden;
	}
	div.arrow_box img{
	min-width:100px;
	width:auto;
	max-height:100px;
	height:auto;
	}

	.arrow_box:after {
	top: 5px;
	left: 5px;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;


	border-color: rgba(136, 183, 213, 0);
	border-top-color: #fff;
	border-width: 20px;
	margin-left: -20px;
	}