I've been using the site for a long long time and it's been very helpful to me.
Today for the first time I've come across a problem I couldn't find a solution for using the search-function.
Here it is:
I have a big application around google maps and it is integral for it that I can zoom in the map to the absolute maximum.
For most urban locations this maximum zoom level is 21, but when I execute setZoom(21) or setOptions({zoom: 21}) on the google maps object, it only goes to zoom level 19.
Only when I execute setZoom(21) again for the same location and after a short wait does google maps actually go to the desired zoom level of 21.
This issue only occurs when the zooming is executed from a function triggered by a geocoding event. If for example I do setZoom
Below you can see a stripped down version of the code and a JSFiddle plus a couple of reproduction steps to see the problem.
Please take a look at this JSFiddle:
http://jsfiddle.net/mYUuR/4/
Steps to reproduce the strange behaviour:
Run the fiddle and wait for the map to load.
Open your console
Press Search at the top left. (You will see the map zooming in and "Current Zoom Level: 19" logged in your console.
Press Search a second time. (The map zooms in further and "Current Zoom Level: 21" will be logged to your console.
Here is my javascript:
var mapObj = initializeMap()
var geocoder;
function initializeMap()
{
geocoder = new google.maps.Geocoder();
searchInput = document.getElementById("searchField");
searchInput.focus();
var searchButton = document.getElementById("searchButton");
searchButton.addEventListener("click", codeAddress);
var mapOptions =
{
center: new google.maps.LatLng(53.70854553884514, 10.105501748621464),
zoom: 3,
panControl: true,
zoomControl: true,
mapTypeControl: true,
scaleControl: true,
streetViewControl: true,
overviewMapControl: true,
draggable: true,
mapTypeId: google.maps.MapTypeId.HYBRID
};
gMapObj = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
return gMapObj;
}
function codeAddress(e) {
e.preventDefault();
var address = searchInput.value;
geocoder.geocode({
"address": address
},
function (results, status)
{
if (status == google.maps.GeocoderStatus.OK)
{
google.maps.event.addListenerOnce(mapObj, "center_changed", function (e)
{
mapObj.setZoom(21);
console.log("Current Zoom Level: " + mapObj.getZoom());
});
mapObj.setCenter(results[0].geometry.location);
} else {
alert("Search was not successful for the following reason: " + status);
}
})
}
Here is my HTML:
<div id="NavigationBar">
<form>
<input id="searchField" type="textbox" value="Hamburg" placeholder="Enter your address."></input>
<input id="searchButton" type="submit" value="Search">
</form>
</div>
<div id="PageContents">
<div id="map-canvas"></div>
</div>
And here is my CSS:
#searchButton
{
background-color: #FFF;
}
html { height: 100% }
body
{
height: 100%; margin: 0; padding: 0;
position: relative;
}
#NavigationBar
{
height: 5%;
border-bottom-style: solid;
border-bottom-width: 1px;
border-bottom-color: #AAA;
}
#map-canvas
{
height: 100%;
width: 100%;
}
#PageContents
{
position: relative;
height: 95%;
width: 100%;
}
Things I've already tried:
Executing a second zoom directly after the first.
Executing a second zoom once the first zoom is done using an eventListener listening for "zoom_changed".
Code Example for that:
google.maps.event.addListenerOnce(mapObj, "zoom_changed", function(e){mapObj.setZoom(21)});
I would very much appreciate any suggestions or thoughts.
Related
I am using the Google Maps API v3 (Streetview) to "preview" the looks of a wind turbine at a location. I am currently using a marker with a custom image to show the wind turbine on the map. This works all as expected, the windmills show up and look quite nice. However, when I am further away, at some point the markers no longer display. (see link)
One of the turbines no longer displays.. :(
Does anyone know if it is possible to make markers visible over a longer distance?
I adapted the StreetView marker example from Google maps.
EDIT:
What I am basically trying to achieve is making the markers show up over a longer distance. What happens now is when you are far enough away from the marker, it is no longer rendered.
var panorama;
function initMap() {
// positions of the windmills
var mill_pos = [
{lat: 53.281593, lng: 6.371393},
{lat: 53.281927, lng: 6.371424},
{lat: 53.282388, lng: 6.371357},
{lat: 53.282926, lng: 6.371250},
];
// start position
var startPos = {lat: 53.281413, lng: 6.371178};
// Set up the map
var map = new google.maps.Map(document.getElementById('map'), {
center: startPos,
zoom: 18,
streetViewControl: false
});
// place the markers
var mill_markers = [];
mill_pos.forEach(function(pos){
mill_markers.push(new google.maps.Marker({
position: pos,
map: map,
icon: 'https://www.immediateentourage.com/ie/wp-content/uploads/2011/10/Wind+Turbine+Original+Photo+by+Eclipse.sx_2.png',
title: 'Turbine'
}))
});
// We get the map's default panorama and set up some defaults.
// Note that we don't yet set it visible.
panorama = map.getStreetView();
panorama.setPosition(startPos);
panorama.setPov(/** #type {google.maps.StreetViewPov} */({
heading: 0,
pitch: 0
}));
panorama.setVisible(true);
}
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#floating-panel {
position: absolute;
top: 10px;
left: 25%;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
text-align: center;
font-family: 'Roboto','sans-serif';
line-height: 30px;
padding-left: 10px;
}
#floating-panel {
margin-left: -100px;
}
<body>
<div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBYkokiNLc6ksDgKlkI0aLuhF9Lwbl1dX0&callback=initMap"></script>
</body>
https://jsfiddle.net/4f9bwxfc/
It would be great if anyone knew how to fix this!
I am having an issue with the default marker, it seems to be offset when zoomed out. I've had a good look around on here but can only find answers to custom marker images and setting the anchor point on the image. I'm using google's default marker image.
http://thecompleteanimaldirectory.com
This is the website in question, you will notice that the maps in the book will be inaccurate once you zoom out, for example the customer in the Isle of White will end up in Germany!
However, on this page, the maps are accurate.
http://www.thecompleteanimaldirectory.com/search.php?category=dog&area=
geocoder = new google.maps.Geocoder();
var mapOptions = {
center: { lat: 32.00, lng: 15.00},
zoom: 8
};
function initialize() {
var map20 = new google.maps.Map(document.getElementById("map_canvas_barrie"), mapOptions);
function codeAddress20() {
var address20 = "11 Ashey Park, Ashey Road Ryde, I.O.W, PO33 4AL";
geocoder.geocode( { "address": address20}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map20.setCenter(results[0].geometry.location);
var marker20 = new google.maps.Marker({
map: map20,
position: results[0].geometry.location,
});
} else {
map20.setZoom(0);
}
});
}
codeAddress20();
Code is identical for both pages, I have gone as far as to style the maps the same on both pages but no luck. Any help is appreciated!
It's an CSS-issue.
Source of the problem is this rule in main.css, which also applies to images in the map:
.booklet .b-wrap-right img,
#book-right-side img {
position: absolute;
bottom: 10px;
right: 15px;
height: 30px;
}
add this rule to override it:
.right-book .gm-style img{
bottom: 0;
right: 0;
position:relative;
height:auto;
}
I have this js code to render my map :
function loadMap(address)
{
console.log(address);
var geocoder = new google.maps.Geocoder();
geocoder.geocode({ "address": address }, function (results, status)
{
var pos = new google.maps.LatLng(53.681602, -1.911672); // default.
if (status === google.maps.GeocoderStatus.OK) {
pos = results[0].geometry.location;
} else {
alert("Error : Unable to locate!");
}
console.log(pos);
var mapOptions = {
center: pos,
zoom: 10,
zoomControl: true,
zoomControlOptions: { position: google.maps.ControlPosition.RIGHT_TOP },
mapTypeControl: false,
panControl: false,
scaleControl: false,
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("mapCanvas"), mapOptions);
var marker = new google.maps.Marker({
map: map,
position: pos,
animation: google.maps.Animation.DROP
});
});
}
Problem is first time it executes the map shows fine, but the 2nd time, the postcode is still the same, the lat/long come out the same yet the map shows partially, with only about a 1/4th of it showing in the top-left of the div.
Anything I am doing incorrectly?
EDIT:
After jterrys suggestions it still looks the same :
HTML/CSS :
#mapCanvas
{
width: 655px;
height: 472px;
border: 1px solid #ccc;
}
<div id="mapCanvas"></div>
I am using JQuery 2.0, I have also had this before when I was using <2.0
Set up the mapoptions and map just once, outside of the geocode callback - then update the marker instead of recreating the entire map.
Fiddle showing one geocode, then another, and back to the first... div positioning looks normal.
Per the updated question, This Fiddle waits for the actual activation of the second tab before rendering the map... I had the exact same issue when creating my tabbed map.
$("#two").click(function() {
init();
}
This could be much more robust and tie into the tabs events that are fired when users interact with them, but this quick example illustrates the solution.
As a side bonus, this also conserves the resources needed to display the map (as well as any quota) until the user actually activates the tab!
I have a bit of a problem with my Google Maps application.
So I'm following the code given on the API to create the basic map. I have this:
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map { height: 75% }
</style>
And i have the following javascript as well to initialize the map:
function showmap(coordinates)
{
var lat = coordinates.latitude;
var lon = coordinates.longitude;
var myOptions = {
position: new google.maps.LatLng(lat, lon),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), myOptions);
}
but all I get in the browser is just a big gray box. I've tried in several browsers (chrome, firefox etc...) but it all looks the same. I'm pretty sure I've set it up correctly...anybody got any ideas what's happening?
thanks in advance!
I don't know what the position-parameter is good for(there is no map-option like this), but I guess you mixed up position and center(center is required)
greetings & salutations,
this is my first run with the google maps API,
i'm using WordPress and the Genesis Framework,
i'm working through a tutorial on
http://tympanus.net/codrops/2011/04/13/interactive-google-map/
and i've gotten a google map to show up on the map page,
http://www.foodtrucksnashville.com/map/
however, you'll notice the map controls are underneath the map. hmmm.
no idea. need help / nudge in teh right direction.
thx again, stackoverflow community.
here's the code in the init.js:
var map, geocoder, marker, ey, my, mouseDown = false;
var o = {
init: function () {
this.map.init();
},
map: {
size: function () {
// so it's a loverly sqware.
var w = jQuery('.content-sidebar #content').width(),
h = 440;
return {
width: w,
height: h
}
},
data: {
zoom: 13,
center: new google.maps.LatLng(36.165389, -86.783237), // Nashville TN Capitol BLDG
scrollwheel: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
},
init: function () {
// get the map size
var size = o.map.size();
// add some css to the #map div based on the size
jQuery('#map').css({
width: size.width,
height: size.height,
});
// make a new google map in the #map div and pass it the map data
map = new google.maps.Map(document.getElementById('map'), o.map.data), geocoder = new google.maps.Geocoder();
/*
// add eventlistener to map to hide posts when dragging?
google.maps.event.addListener(map, 'dragstart', function () {
jQuery('.posts').hide();
});
*/
}
} // end map
} // end o object
jQuery(window).load(function () {
o.init();
});
My problem came from a z-index on my css file. Tried to disable one by one until I found it.
figure.rounded img {
width: 100%;
z-index: -1; /* Here he is */
position: relative;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
finally figured out what as going on,
found the solution over at google groups for the Maps API v3,
http://code.google.com/apis/maps/documentation/javascript/forum.html?place=topic%2Fgoogle-maps-js-api-v3%2F8dOLhjNQzmo%2Fdiscussion
there were some css properties buried in my child theme targeting images with some max-width: 100%.
once i removed all the references targeting img elements with max-width, life was groovy again.