testes com google maps api v3

localizaçao automatica, marker, zoom, width/height com porcentagem, centralizaçao automatica ao redimensionar e ao mover o marker, infowindow

by ian_smithz

HTML

<script src="http://maps.googleapis.com/maps/api/js?libraries=places&amp;sensor=false&amp;language=pt-BR&amp;.js"></script>
<div id="buttonbar" class="mine">
    <button id="btnlabels">hide/show labels</button>
    <button id="btnaddmarker">add marker</button>
    <button id="btnoffset">offset -100px</button>
    <input id="nptsearch" type="text" placeholder="autocomplete test (BRazil)" />
</div>

<div id="map_go" class="mine"></div>

CSS

body {margin: 0.3em;}

.mine {width: 95%; margin: 0.1em;}

#buttonbar {background-color: whitesmoke;}

#map_go {
    border: 1px solid red; 
    height: 90%; 
    position:absolute;
}

JavaScript

directionsService = new google.maps.DirectionsService();
directionsDisplay = new google.maps.DirectionsRenderer();

var UK = new google.maps.LatLng(53.409532, -2.010498);
var IT = new google.maps.LatLng(42.745334, 12.738430);

var noStreetNames = [{
    featureType: "road",
    elementType: "labels",
    stylers: [{
        visibility: "off"}]}];

hideLabels = new google.maps.StyledMapType(noStreetNames, {
    name: "hideLabels"
});


var myOptions = {
    zoom: 1,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: UK
}

var showPosition = function(position) {
    var userLatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

    var marker = new google.maps.Marker({
        position: userLatLng,
        title: 'Your Location',
        draggable: true,
        map: map
    });

    var infowindow = new google.maps.InfoWindow({
        content: '<div id="infodiv" style="width: 300px">300px wide infowindow!  if the mouse is not here, will close after 3 seconds</div>'
    });

    google.maps.event.addListener(marker, 'dragend', function() {
        infowindow.open(map, marker)
        map.setCenter(marker.getPosition())
    });

    google.maps.event.addListener(marker, 'mouseover', function() {
        infowindow.open(map, marker)
    });

    google.maps.event.addListener(marker, 'mouseout', function() {
        t = setTimeout(function() {
            infowindow.close()
        }, 3000);
    });

    google.maps.event.addListener(infowindow, 'domready', function() {
        $('#infodiv').on('mouseenter', function() {
            clearTimeout(t);
        }).on('mouseleave', function() {
            t = setTimeout(function() {
                infowindow.close()
            }, 1000);
        })
    });

    var input = document.getElementById('nptsearch');
    var autocomplete = new google.maps.places.Autocomplete(input);

    autocomplete.bindTo('bounds', map);

    google.maps.event.addListener(autocomplete, 'place_changed',...