You may be building a website that has plugins or modules to deal with google maps, but, you may be working on a site that does not have modules or plugins available. In that event, you can use the following code to create a function that allow you to enter either longitude/latitude or address for mapping.

The following code clip will allow you to display a map with markers and associated pop-up bubble. You can add as many markers as you would like, with an equal number of pop-up information bubbles. You can place the markers by specifying an address, or a longitude and latitude.

<style type="text/css">
  .entry-content { max-width:none ; }
   #bubble { height: 50px ; -moz-border-radius: 10px; 
      -webkit-border-radius: 10px; -khtml-border-radius: 10px; 
      border-radius: 10px;  }
</style>
<script type="text/javascript" 
    src="http://maps.googleapis.com/maps/api/js?sensor=false"> </script>
<script type="text/javascript">
  function map_initialize() {
      geocoder = new google.maps.Geocoder();
      var latlng = new google.maps.LatLng(-34.397, 150.644);
      var myOptions = {
          zoom: 12,
          center: latlng,
          mapTypeId: google.maps.MapTypeId.SATELLITE
      }
      d_map = new google.maps.Map(document.getElementById("map-me"), 
              myOptions);
      mapIt(999, 999, "Crescent City, CA", 
          "http://www.advancedwebhelp.com/blog/wp-content/uploads/2013/11/marker.png",
          "label to see on hover of marker", 
          "<'div id='bubble'>Say something in the pop-up bubble</div>", 
          "http://www.mydomain.com/link") ; 
  }
  function mapIt(lat, lng, address, image, label, bubble, alink) {
      if (lat != 999) {
          var myLatLong = new google.maps.LatLng(lat,lng) ;
          d_map.setCenter(myLatLong);
          var link = alink ;
          var contentString = '<div class="marker_content">'+ 
              '<a href="' + link + '">'  +  bubble +   
              '</a></div>';
          var infowindow = new google.maps.InfoWindow({
              content: contentString
          });
          var marker = new google.maps.Marker({
              map: d_map,
              icon: image,
              title: label,
              position: myLatLong
          });
          google.maps.event.addListener(marker, 'click', function() {
             infowindow.open(d_map,marker);
          });
      } else {
          geocoder.geocode( { 'address': address}, function(results, status) {
              if (status == google.maps.GeocoderStatus.OK) {
              d_map.setCenter(results[0].geometry.location);
                  var link = alink ;
                  var contentString = '<div class="marker_content">' + 
                     '<a href="' + link + '">' + bubble + '</a></div><p>';
                  var infowindow = new google.maps.InfoWindow({
                      content: contentString
                  });
              var marker = new google.maps.Marker({
                      map: d_map,
                      icon: image,
                      title: label,
                      position: results[0].geometry.location
                  });
              google.maps.event.addListener(marker, 'click', function() {
                      infowindow.open(d_map,marker);
                 });
              } else { alert("Geocode was not successful 
                      for the following reason: " + status); }
          });
      }
  }
  jQuery(function() {
      map_initialize() ;        
 }) ;
</script>

Sample

I should mention several things about the above code:

1. In the declaration of the div for map-me, you can change the width and height of the map.
2. In the declaration of var myLatLng in map_initialize(), you can change the longitude and latitude that will be used for the center of the map
3. In the declaration of myOptions in map_initialize(), you can change the type of map, and zoom to meet your needs
4. You may make multiple calls to mapIt() to insert markers on the map.
5. If you do not use the latitude and longitude in mapIt, use values 999,999.
6. In mapIt, you include the flag for the marker, so, you can make every marker can look different.
7. In mapIt, you can pass the content used in the bubble for the marker … it can include HTML.