LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

  
    
    
    Google Maps JavaScript API v3 Example: Overlay Simple
    
  
  
    
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;
}
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 = "";
        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);
  
}
Term
Sat, 04/14/2018 - 20:45

Related Codes

Pen ID
Square Adv