Skip to content

Instantly share code, notes, and snippets.

@badsyntax

badsyntax/labelled_marker.js

Created April 12, 2012 09:45
Download ZIP

Revisions

  1. badsyntax revised this gist Apr 12, 2012. 1 changed file with 98 additions and 99 deletions.
    197 changes: 98 additions & 99 deletions labelled_marker.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,114 +1,113 @@
    /*
    * An example of how to use a Google Map overlay to display a label on top of marker.
    * This is a slight re-work of http://www.tdmarketing.co.nz/blog/2011/03/09/create-marker-with-custom-labels-in-google-maps-api-v3/
    * I suggest you rather view that blog post, this code is pasted here purely for my own personal reference.
    */

    /*
    * An example of how to use a Google Map overlay to display a label on top of marker.
    * This is a slight re-work of http://www.tdmarketing.co.nz/blog/2011/03/09/create-marker-with-custom-labels-in-google-maps-api-v3/
    * I suggest you rather view that blog post, this code is pasted here purely for my own personal reference.
    */

    var
    point = {
    lat: 37.8478115,
    long: 15.2934327
    },
    marker = {
    icon: {
    url: 'images/icon-map-pin.png',
    size: { x: 24, y: 39 }
    },
    shadow: {
    url: 'images/icon-map-ping-shadow.png',
    size: { x: 38, y: 47 }
    }
    var
    point = {
    lat: 37.8478115,
    long: 15.2934327
    },
    marker = {
    icon: {
    url: 'images/icon-map-pin.png',
    size: { x: 24, y: 39 }
    },
    markerIcon = new google.maps.MarkerImage(
    marker.icon.url,
    new google.maps.Size(marker.icon.size.x, marker.icon.size.y),
    new google.maps.Point(0, 0)
    ),
    markerShadow = new google.maps.MarkerImage(
    marker.shadow.url,
    new google.maps.Size(marker.shadow.size.x, marker.shadow.size.y),
    new google.maps.Point(0, 0),
    new google.maps.Point(7, 40)
    );

    // Our Custom Marker
    var Marker = function(options){
    shadow: {
    url: 'images/icon-map-ping-shadow.png',
    size: { x: 38, y: 47 }
    }
    },
    markerIcon = new google.maps.MarkerImage(
    marker.icon.url,
    new google.maps.Size(marker.icon.size.x, marker.icon.size.y),
    new google.maps.Point(0, 0)
    ),
    markerShadow = new google.maps.MarkerImage(
    marker.shadow.url,
    new google.maps.Size(marker.shadow.size.x, marker.shadow.size.y),
    new google.maps.Point(0, 0),
    new google.maps.Point(7, 40)
    );

    google.maps.Marker.apply(this, arguments);
    // Our Custom Marker
    var Marker = function(options){

    if (options.label) {
    this.MarkerLabel = new MarkerLabel({
    map: this.map,
    marker: this,
    text: options.label
    });
    this.MarkerLabel.bindTo('position', this, 'position');
    }
    };
    google.maps.Marker.apply(this, arguments);

    Marker.prototype = $.extend(new google.maps.Marker(), {
    // If we're adding/removing the marker from the map, we need to do the same for the marker label overlay
    setMap: function(){
    google.maps.Marker.prototype.setMap.apply(this, arguments);
    (this.MarkerLabel) && this.MarkerLabel.setMap.apply(this.MarkerLabel, arguments);
    }
    });
    if (options.label) {
    this.MarkerLabel = new MarkerLabel({
    map: this.map,
    marker: this,
    text: options.label
    });
    this.MarkerLabel.bindTo('position', this, 'position');
    }
    };

    // Our custom marker label overlay
    var MarkerLabel = function(options) {
    Marker.prototype = $.extend(new google.maps.Marker(), {
    // If we're adding/removing the marker from the map, we need to do the same for the marker label overlay
    setMap: function(){
    google.maps.Marker.prototype.setMap.apply(this, arguments);
    (this.MarkerLabel) && this.MarkerLabel.setMap.apply(this.MarkerLabel, arguments);
    }
    });

    var self = this;
    // Our custom marker label overlay
    var MarkerLabel = function(options) {

    this.setValues(options);
    var self = this;

    // Create the label container
    this.div = document.createElement('div');
    this.div.className = 'map-marker-label';
    this.setValues(options);

    // Trigger the marker click handler if clicking on the label
    google.maps.event.addDomListener(this.div, 'click', function(e){
    (e.stopPropagation) && e.stopPropagation();
    google.maps.event.trigger(self.marker, 'click');
    });
    };
    // Create the label container
    this.div = document.createElement('div');
    this.div.className = 'map-marker-label';

    MarkerLabel.prototype = $.extend(new google.maps.OverlayView(), {
    onAdd: function() {
    this.getPanes().overlayImage.appendChild(this.div);
    // Trigger the marker click handler if clicking on the label
    google.maps.event.addDomListener(this.div, 'click', function(e){
    (e.stopPropagation) && e.stopPropagation();
    google.maps.event.trigger(self.marker, 'click');
    });
    };

    // Ensures the label is redrawn if the text or position is changed.
    var self = this;
    this.listeners = [
    google.maps.event.addListener(this, 'position_changed', function() { self.draw(); }),
    google.maps.event.addListener(this, 'text_changed', function() { self.draw(); }),
    google.maps.event.addListener(this, 'zindex_changed', function() { self.draw(); })
    ];
    },
    onRemove: function() {
    this.div.parentNode.removeChild(this.div);
    // Label is removed from the map, stop updating its position/text
    for (var i = 0, l = this.listeners.length; i < l; ++i) {
    google.maps.event.removeListener(this.listeners[i]);
    }
    },
    draw: function() {
    var
    text = String(this.get('text')),
    markerSize = marker.icon.size,
    position = this.getProjection().fromLatLngToDivPixel(this.get('position'));
    MarkerLabel.prototype = $.extend(new google.maps.OverlayView(), {
    onAdd: function() {
    this.getPanes().overlayImage.appendChild(this.div);

    this.div.innerHTML = text;
    this.div.style.left = (position.x - (markerSize.x / 2)) - (text.length * 3) + 'px';
    this.div.style.top = (position.y - markerSize.y) + 'px';
    // Ensures the label is redrawn if the text or position is changed.
    var self = this;
    this.listeners = [
    google.maps.event.addListener(this, 'position_changed', function() { self.draw(); }),
    google.maps.event.addListener(this, 'text_changed', function() { self.draw(); }),
    google.maps.event.addListener(this, 'zindex_changed', function() { self.draw(); })
    ];
    },
    onRemove: function() {
    this.div.parentNode.removeChild(this.div);
    // Label is removed from the map, stop updating its position/text
    for (var i = 0, l = this.listeners.length; i < l; ++i) {
    google.maps.event.removeListener(this.listeners[i]);
    }
    });
    },
    draw: function() {
    var
    text = String(this.get('text')),
    markerSize = marker.icon.size,
    position = this.getProjection().fromLatLngToDivPixel(this.get('position'));

    this.div.innerHTML = text;
    this.div.style.left = (position.x - (markerSize.x / 2)) - (text.length * 3) + 'px';
    this.div.style.top = (position.y - markerSize.y) + 'px';
    }
    });

    // Create the custom marker
    var MyMarker = new Marker({
    map: gMapInstance,
    position: new google.maps.LatLng(point.lat, point.long),
    icon: markerIcon,
    shadow: markerShadow,
    label: 'Label text'
    });
    // Create the custom marker
    var MyMarker = new Marker({
    map: gMapInstance,
    position: new google.maps.LatLng(point.lat, point.long),
    icon: markerIcon,
    shadow: markerShadow,
    label: 'Label text'
    });
  2. badsyntax created this gist Apr 12, 2012.
    114 changes: 114 additions & 0 deletions labelled_marker.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,114 @@

    /*
    * An example of how to use a Google Map overlay to display a label on top of marker.
    * This is a slight re-work of http://www.tdmarketing.co.nz/blog/2011/03/09/create-marker-with-custom-labels-in-google-maps-api-v3/
    * I suggest you rather view that blog post, this code is pasted here purely for my own personal reference.
    */

    var
    point = {
    lat: 37.8478115,
    long: 15.2934327
    },
    marker = {
    icon: {
    url: 'images/icon-map-pin.png',
    size: { x: 24, y: 39 }
    },
    shadow: {
    url: 'images/icon-map-ping-shadow.png',
    size: { x: 38, y: 47 }
    }
    },
    markerIcon = new google.maps.MarkerImage(
    marker.icon.url,
    new google.maps.Size(marker.icon.size.x, marker.icon.size.y),
    new google.maps.Point(0, 0)
    ),
    markerShadow = new google.maps.MarkerImage(
    marker.shadow.url,
    new google.maps.Size(marker.shadow.size.x, marker.shadow.size.y),
    new google.maps.Point(0, 0),
    new google.maps.Point(7, 40)
    );

    // Our Custom Marker
    var Marker = function(options){

    google.maps.Marker.apply(this, arguments);

    if (options.label) {
    this.MarkerLabel = new MarkerLabel({
    map: this.map,
    marker: this,
    text: options.label
    });
    this.MarkerLabel.bindTo('position', this, 'position');
    }
    };

    Marker.prototype = $.extend(new google.maps.Marker(), {
    // If we're adding/removing the marker from the map, we need to do the same for the marker label overlay
    setMap: function(){
    google.maps.Marker.prototype.setMap.apply(this, arguments);
    (this.MarkerLabel) && this.MarkerLabel.setMap.apply(this.MarkerLabel, arguments);
    }
    });

    // Our custom marker label overlay
    var MarkerLabel = function(options) {

    var self = this;

    this.setValues(options);

    // Create the label container
    this.div = document.createElement('div');
    this.div.className = 'map-marker-label';

    // Trigger the marker click handler if clicking on the label
    google.maps.event.addDomListener(this.div, 'click', function(e){
    (e.stopPropagation) && e.stopPropagation();
    google.maps.event.trigger(self.marker, 'click');
    });
    };

    MarkerLabel.prototype = $.extend(new google.maps.OverlayView(), {
    onAdd: function() {
    this.getPanes().overlayImage.appendChild(this.div);

    // Ensures the label is redrawn if the text or position is changed.
    var self = this;
    this.listeners = [
    google.maps.event.addListener(this, 'position_changed', function() { self.draw(); }),
    google.maps.event.addListener(this, 'text_changed', function() { self.draw(); }),
    google.maps.event.addListener(this, 'zindex_changed', function() { self.draw(); })
    ];
    },
    onRemove: function() {
    this.div.parentNode.removeChild(this.div);
    // Label is removed from the map, stop updating its position/text
    for (var i = 0, l = this.listeners.length; i < l; ++i) {
    google.maps.event.removeListener(this.listeners[i]);
    }
    },
    draw: function() {
    var
    text = String(this.get('text')),
    markerSize = marker.icon.size,
    position = this.getProjection().fromLatLngToDivPixel(this.get('position'));

    this.div.innerHTML = text;
    this.div.style.left = (position.x - (markerSize.x / 2)) - (text.length * 3) + 'px';
    this.div.style.top = (position.y - markerSize.y) + 'px';
    }
    });

    // Create the custom marker
    var MyMarker = new Marker({
    map: gMapInstance,
    position: new google.maps.LatLng(point.lat, point.long),
    icon: markerIcon,
    shadow: markerShadow,
    label: 'Label text'
    });