Как добавить карту гугл без интерфейса и с подписью под маркером

261

17 июля 2017, 16:54

Вообщем, мне нужно на сайт добавить гугл карту

Как вы видите на скрине, на карте не должно быть элементов управления, а также рядом с маркером должна быть подпись. Проблема в том, что если я добавляю через АПИ, я не могу установить текст рядом с маркером. Вот мой код:

 var map;
         function initMap() {
           map = new google.maps.Map(document.getElementsByClassName('map')[0], {
             center: {lat: 55.800115, lng: 37.715050},
             zoom: 18,
             disableDefaultUI: true
           });
           var marker = new google.maps.Marker({
               position: {lat: 55.800115, lng: 37.715050},
               map: map
             });
         }

Если же я воспользуюсь гугл сервисом и вставлю карту айфрамом, то я не могу убрать элементы управления. Может кто то знает что делать??

Answer 1

Вам нужен будет API Key для гугл карты и тогда вы сможете добавить гугл карту на сайт, ну и используйте код, там добавляэтся кастомный маркер и Label

Склонируйте себе с гита либо скачайте архив и посмотрите на реальном примере вот ссылка

try { 
    var point = { 
        lat: 55.800115, 
        lng: 37.715050 
    }; 
    var markerSize = { 
        x: 46, 
        y: 49 
    }; 
    google.maps.Marker.prototype.setLabel = function(label) { 
        this.label = new MarkerLabel({ 
            map: this.map, 
            marker: this, 
            text: label 
        }); 
        this.label.bindTo('position', this, 'position'); 
    }; 
    var MarkerLabel = function(options) { 
        this.setValues(options); 
        this.span = document.createElement('span'); 
        this.span.className = 'map-marker-label'; 
    }; 
    MarkerLabel.prototype = $.extend(new google.maps.OverlayView(), { 
        onAdd: function() { 
            this.getPanes().overlayImage.appendChild(this.span); 
            var self = this; 
            this.listeners = [ 
                google.maps.event.addListener(this, 'position_changed', function() { 
                    self.draw(); 
                }) 
            ]; 
        }, 
        draw: function() { 
            var text = String(this.get('text')); 
            var position = this.getProjection().fromLatLngToDivPixel(this.get('position')); 
            this.span.innerHTML = text; 
            this.span.style.left = (position.x - (markerSize.x / 2)) - (text.length * 3) - 46 + 'px'; 
            this.span.style.top = (position.y - markerSize.y - 49) + 'px'; 
        } 
    }); 
    function initialize() { 
        var myLatLng = new google.maps.LatLng(point.lat, point.lng); 
        var gmap = new google.maps.Map(document.getElementById('mapWrapper'), { 
            zoom: 18, 
            center: myLatLng, 
            zoomControl: true, 
            disableDoubleClickZoom: true, 
            mapTypeControl: true, 
            scaleControl: true, 
            scrollwheel: true, 
            panControl: true, 
            streetViewControl: true, 
            draggable : true, 
            overviewMapControl: true, 
            mapTypeId: google.maps.MapTypeId.ROADMAP, 
            styles: [ 
               { 
                    "elementType": "labels.icon" 
                } 
            ] 
        }); 
        var myMarker = new google.maps.Marker({ 
            map: gmap, 
            icon: "../images/site-map-logo.png", 
            position: myLatLng, 
            label: 'Enter here your label text', 
            draggable: false 
        }); 
        google.maps.event.addListener(myMarker, 'click', function() { 
            window.open("https://www.google.com.ua/maps/place/Krasnoarmeyskaya+ul.,+89,+Moskva,+Russia,+125319/@55.8036713,37.5346202,20.75z/data=!4m5!3m4!1s0x46b549c60271b8a5:0x2e7f6efb37ae7a40!8m2!3d55.8036976!4d37.5346816?hl=en"); 
        }); 
    } 
    google.maps.event.addDomListener(window, "load", initialize); 
} catch (e) { 
    alert(e); 
}

.mapWrapper { 
  overflow: hidden; 
  padding-bottom: 56%; 
  position: relative; 
  height: 0; 
} 
 
.mapWrapper iframe { 
  left: 0; 
  top: 0; 
  height: 100%; 
  width: 100%; 
  position: absolute; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<!-- google API key for map --> 
	<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3&amp;sensor=false"></script> 
<div id='mapWrapper'></div>