infoboxv1

working.

by witold

HTML

<html>
  <head>
    <title>Google Maps JavaScript API v3 Example: Map Simple</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      html, body, #map_canvas {
        margin: 0;
        padding: 0;
        height: 100%;
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
        <script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>
        
    <script>
      var map;
      function initialize() {
        var mapOptions = {
          zoom: 8,
        //center: new google.maps.LatLng(-34.397, 150.644),
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById('map_canvas'),
            mapOptions);
        
        
                       // Try HTML5 geolocation
                if (navigator.geolocation) {
                    navigator.geolocation.getCurrentPosition(function(position) {
                        var pos = new google.maps.LatLng(position.coords.latitude,
                        position.coords.longitude);

                        map.setCenter(pos);


                    }, function() {
                        handleNoGeolocation(true);
                    });
                } else {
                    // Browser doesn't support Geolocation
                    handleNoGeolocation(false);
                } 
        
        
        ///
                    // click listenrer that places a marker
                google.maps.event.addListener(map, 'click', function(event) {
                    placeMarker2(event.latLng);
                });
        ///
        
        
        ///
                       function placeMarker2(location) {
                    newmarker2 = new google.maps.Marker({
                        position: location,
                       ...

CSS

.infobox-wrapper {
    display:none;
}
#infobox {
    border:2px solid black;
    margin-top: 8px;
    background:#333;
    color:#FFF;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    padding: .5em 1em;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    text-shadow:0 -1px #000000;
    -webkit-box-shadow: 0 0  8px #000;
    box-shadow: 0 0 8px #000;
}