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!
Related
Need to implement a simple draggable map (no zoom), the pin should stay static in the centre, overlaying the map. Every time the map is moved/dragged under the static pin the positioning details of the pin are updated and I can grab those positioning details and display the address in input field above.
Probably a very simple task, I just don't have any experience with Google maps and it would be great if someone could point me either to a working example of this or to right API's/Libraries that I can use in my HTML5/Angular app. Would save me a lot of time researching. Thanks..
You can re-center the marker in a dragend event, and grab the new lat/long. If you want to convert the lat/long to a real world address, you can pass them to a reverse geocoder.
var newlat, newlong;
var latitude = 51.5;
var longitude = -0.12;
var coords = new google.maps.LatLng(latitude, longitude);
var mapOptions = {
zoom: 8,
center: coords,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(
document.getElementById("mapContainer"), mapOptions
);
var marker = new google.maps.Marker({
position: coords,
map: map,
draggable: true,
});
google.maps.event.addListener(map, 'dragend',
function() {
marker.setPosition(map.getCenter());
newlat = marker.getPosition().lat();
newlong = marker.getPosition().lng();
$('#coords').html(newlat + ', ' + newlong);
})
#mapContainer {
width: 400px;
height: 200px;
border: 1px solid #ebebeb;
}
#coords {
width: 380px;
padding: 10px;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js"></script>
<div id="mapContainer"></div>
<br>
<div id="coords"></div>
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'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.
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.