Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
​
<!DOCTYPE html>
<html>
  <head>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <meta charset="utf-8">
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobubble/src/infobubble.js"></script>
​
​
  </head> 
​
  <body onload="init()">
    <div id="map_canvas" style="height: 600px; width: 800px;"></div>
​
  </body>
  <script>
    
    
    
  function init () {
​
    var markerData = [
        ['Santiago de Cuba', 20.040450354169483, -75.8331298828125],
        ['Las Tunas', 20.97682772467435, -76.9482421875],
        ['Camaguey', 21.39681937408218, -77.9205322265625],
        ['Playa Santa Lucia', 21.555284406923192, -77.0526123046875],
        ['Santa Clara', 22.421184710331854, -79.9639892578125],
        ['Cienfuegos', 22.161970614367977, -80.4473876953125],
        ['Havana', 23.12520549860231, -82.3919677734375],
        ['San Cristobel', 22.730590425493833, -83.045654296875],
        ['Pinar del Rio', 22.43641760076311, -83.69384765625]
    ];
    
    var arrMarkers = [];
​
    var mapCenter = new google.maps.LatLng(21.616579336740603, -78.892822265625);
    map = new google.maps.Map(document.getElementById('map_canvas'), {
      zoom: 7,
      center: mapCenter,
      mapTypeId: google.maps.MapTypeId.TERRAIN
    });
    //var image = '/wp-content/themes/Shootcuba/images/map-icon.png';
    
    function addMarker (pos, title) {
      var marker = new google.maps.Marker({
        map: map,
        position: pos,
        //icon: image
      });  
      
      var infoBubble = new InfoBubble({
        content: '<div class="phoneytext">' + title + '<div class="left-col2"></div></div>',
        boxClass: 'info-box',
        alignBottom: true,
        pixelOffset: new google.maps.Size(-150, -40),
        maxWidth: 300,
        padding: 0,
        closeBoxMargin: '0px',
        borderColor: '#ffffff',
        borderRadius: '0',
        maxWidth: 535,
        disableAutoPan: false,
        hideCloseButton: false,
        backgroundClassName: 'phoney'
      });
      
      google.maps.event.addListener(marker, 'click', function () { 
        infoBubble.open(map, marker);
        console.log(infoBubble.content);
      });
       
      return marker;
    }
    
    
    for (i = 0; i < markerData.length; i++) {
      var pos = new google.maps.LatLng(markerData[i][1], markerData[i][2]);
      var title = markerData[i][0];
      var new_marker = addMarker(pos, title);
      arrMarkers.push(new_marker);
​
    }
  };
  </script>
  
</html>
​
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers