JS: fullMap
more at: http://forum.jquery.com/topic/google-map-not-stretching-properly-when-width-set-to-100
by Alex Azuero
HTML
<div id='map'></div>
CSS
</style><script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script><style>
html,body{height: 100%; margin: 0; padding:0}
#map {width: 100%; height: 100%}
JavaScript
function googleMap(lat, lng) {
if(typeof lat === "string" && !lng) {
new google.maps.Geocoder().geocode({
address: lat
}, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var marker = new google.maps.Marker({
position: results[0].geometry.location,
map: map,
title: "foo"
});
map.setCenter(results[0].geometry.location);
infoWindow.open(map, marker);
}
});
}
var LatLng = new google.maps.LatLng(lat, lng || 0);
var myOptions = {
zoom: 10,
center: LatLng,
disableDefaultUI: true,
scrollwheel: false,
draggable: !("ontouchend" in document),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), myOptions);
// http://stackoverflow.com/a/5134048/1250044
var overlay = document.createElement('div');
overlay.style.marginBottom = "20px";
overlay.style.fontSize = Math.max(Math.min($(window).outerWidth() / (1 * 8), parseFloat(Number.POSITIVE_INFINITY)), parseFloat(Number.NEGATIVE_INFINITY)) + 'px';
overlay.style.pointerEvents = "none";
overlay.innerHTML = 'SILBERSUCHER';
map.controls[google.maps.ControlPosition.BOTTOM_CENTER].push(overlay);
var marker = new google.maps.Marker({
position: LatLng,
map: map
});
var infoWindow = new google.maps.InfoWindow({
content: '<p>Foo bar is not equal to bar foo! </p>',
position: LatLng
});
infoWindow.open(map, marker);
// map.setCenter(LatLng);
// new google.maps.event.trigger(map, 'resize');
}
googleMap("GravelottestraĂźe, Kiel");
// googleMap(54.325071,10.114998);
/*
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
googleMap(position.coords.latitude,...