How to add text label in Google Map API

Question

I am currently working on a Google map API and got it working. Unfortunately i had a little problem. I can't seem to find a way to put a label or text beside the marker. Here is my code. I downloaded a javascript maplabel but it seems not working or perhaps there is wrong on how i put it.

I am still learning Javascript and Google API, hopefully you can help me.

Thanks.

<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/maplabel/src/maplabel-compiled.js"></script>
<script>
var geocoder, map;

function initialize() {
  geocoder = new google.maps.Geocoder();
  var latlng = new google.maps.LatLng(58.5452824, -92.4986259);
  var myOptions = {
      zoom: 15,
      center: latlng,
      mapTypeControl: false
    }
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  codeAddress();
  }
  var icon = { 
    url: 'images/map_icon.png'
  };

  var mapLabel = new MapLabel({
    text: 'Test',
    position: new google.maps.LatLng(34.515233, -100.918565),
    map: map,
    fontSize: 35,
    align: 'right'
  });



function codeAddress() {

var address = "Address Test";


geocoder.geocode( { 'address': address}, function(results, status) {

if (status == google.maps.GeocoderStatus.OK) {

map.setCenter(results[0].geometry.location);

var marker = new google.maps.Marker({

map: map,
address: address,
icon: icon,
position: results[0].geometry.location
      });

} 
else {

alert("Geocode was not successful for the following reason: " + status);
    }
  });
}


jQuery(document).ready(function (){
    initialize();//run the map
});


</script>

<style type="text/css">
#map_canvas{
  width: 100%;
  height: 400px;
}
</style>

 <div id="map_canvas"></div>

 <div class="overlay-gray-banner">
    <div class="uk-container uk-container-center">
    <h1>Contact Us</h1>
    <p class="banner-short-desc">We are happy to hear from you. Please contact us through the form below and we will get back to you
      as soon as we can.</p>
    </div>
 </div>

Answer 1

The issue with your code is that you are creating the map label outside of the initialize function, so it is created before the map is defined (initialize runs on page load, after the map label is created). Move that code inside the initialize function.

function initialize() {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(58.5452824, -92.4986259);
    var myOptions = {
        zoom: 15,
        center: new google.maps.LatLng(34.515233, -100.918565), // latlng,
        mapTypeControl: false
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    var mapLabel = new MapLabel({
        text: 'Test',
        position: new google.maps.LatLng(34.515233, -100.918565),
        map: map,
        fontSize: 35,
        align: 'right'
    });

    codeAddress();    
}

working fiddle

working code snippet:

var geocoder, map;

function initialize() {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(58.5452824, -92.4986259);
    var myOptions = {
        zoom: 15,
        center: new google.maps.LatLng(34.515233, -100.918565), // latlng,
        mapTypeControl: false
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    // codeAddress();
    var mapLabel = new MapLabel({
        text: 'Test',
        position: new google.maps.LatLng(34.515233, -100.918565),
        map: map,
        fontSize: 35,
        align: 'right'
    });

}
var icon = {
    url: 'images/map_icon.png'
};



function codeAddress() {

    var address = "Address Test";


    geocoder.geocode({
        'address': address
    }, function (results, status) {

        if (status == google.maps.GeocoderStatus.OK) {

            map.setCenter(results[0].geometry.location);

            var marker = new google.maps.Marker({

                map: map,
                address: address,
                icon: icon,
                position: results[0].geometry.location
            });

        } else {

            alert("Geocode was not successful for the following reason: " + status);
        }
    });
}


jQuery(document).ready(function () {
    initialize(); //run the map
});

#map_canvas {
    width: 100%;
    height: 400px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<script src="https://cdn.jsdelivr.net/gh/geocodezip/v3-utility-library@master/archive/maplabel/src/maplabel.js"></script>
<div id="map_canvas"></div>
<div class="overlay-gray-banner">
    <div class="uk-container uk-container-center">
         <h1>Contact Us</h1>

        <p class="banner-short-desc">We are happy to hear from you. Please contact us through the form below and we will get back to you as soon as we can.</p>
    </div>
</div>