I try to get a certain set of coordinates to display. I get this done with the google maps API, but somehow the US ends up to be the center of the world. I tried
map.setCenter( latlngbounds.getCenter(), map.fitBounds( latlngbounds ) );
and
var dor24 = new google.maps.LatLng(52.519325,13.392709);
map.setCenter( dor24);
map.fitBounds( latlngbounds );
But somehow my setting the center is ignored when at zoom level 1. Is this due to inner workings of google maps or is there a way to get a world map centered on Europe and all points showing?
These are the exmples I am talking about:
http://hpsg.fu-berlin.de/~stefan/Vortraege/
http://hpsg.fu-berlin.de/~stefan/Vortraege/talk-map.html
Edit: But without fitbounds I get this:
Don't call both map.setCenter and map.fitBounds, map.fitBounds resets the map center.
proof of concept fiddle
code snippet:
function initialize() {
var map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 1,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var dor24 = new google.maps.LatLng(52.519325, 13.392709);
map.setCenter(dor24);
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
height: 256px;
width: 256px;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>
Related
I created google map with multiple markers to my website with "Google My Maps" tool and my code looks like this:
<iframe src="https://www.google.com/maps/d/u/0/embed?mid=1PdcME79x-maD5xuiVEi4C777aL4" width="640" height="480"></iframe>
It was really quick and simple without any code writting but what I don't like is the header bar which is showing the name and share button. Can I somehow hide this bar? Thank you.
You can get the link to the KML from that "MyMap":
http://www.google.com/maps/d/kml?mid=1PdcME79x-maD5xuiVEi4C777aL4
And use that to populate a KmlLayer in a Google Maps Javascript API v3 map:
var kmlLayer = new google.maps.KmlLayer({
url: "http://www.google.com/maps/d/kml?mid=1PdcME79x-maD5xuiVEi4C777aL4",
map:map
});
proof of concept fiddle
code snippet:
function initialize() {
var map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var kmlLayer = new google.maps.KmlLayer({
url: "https://www.google.com/maps/d/kml?mid=1PdcME79x-maD5xuiVEi4C777aL4",
map: map
});
google.maps.event.addListener(kmlLayer, 'status_changed', function() {
document.getElementById('status').innerHTML = kmlLayer.getStatus();
});
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas"></div>
<div id="status"></div>
How can I remove the info-windows but keep the actual landmark visible? I just don't want the actual info-window to appear when the landmark is clicked because I have markers around landmarks and sometimes the landmarks are accidentally clicked instead.
Those are called clickableIcons.
To turn off the InfoWindows, set the MapOption clickableIcons: false.
From the documentation
:
clickableIcons | Type: boolean
When false, map icons are not clickable. A map icon represents a point of interest, also known as a POI. By default map icons are clickable.
code snippet:
function initialize() {
var map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP,
clickableIcons: false
});
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>
I am having difficulties trying to add an image as a ground overlay to a google map that I am creating. In all of the help files that I have seen, the image has been passed to the ground overlay function as a url. Is it possible to have an image that is stored on my machine passed in, rather than an online image?
Here's the code I have for the map & overlay:
function initialize() {
var mapOptions = {
center: {lat: 45.3469, lng: -75.7594},
zoom: 10,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var imageBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(45.2118075, -75.4455767),
new google.maps.LatLng(45.2043559, -75.4545309));
var campusOverlay = new google.maps.GroundOverlay('Campus.JPG', imageBounds);
campusOverlay.setMap(map);
}
I am looking to add the 'Campus.jpg' image that I created to the map. I have also tried passing in the entire path with all its directories and still nothing appears on the map. If there is no way of passing an image like this, is there a way to put the image online and use it that way?
Thanks
Pass in a full url to the image as the first parameter for GroundOverlay and make sure that your bounds are correct. This can be kind of tricky. Your overlay should cover a northern lat and southern lat/east and
west longitude, so you essentially have some sort of rectangular area.
Here is a quick example. Sure you will get the idea.
var overlay;
function initialize() {
var center = new google.maps.LatLng(45.3469, -75.7594);
var imageBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(45.2, -76.1),
new google.maps.LatLng(45.5, -75.38)
);
var mapOptions = {
zoom: 10,
center: center,
disableDefaultUI: true
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
overlay = new google.maps.GroundOverlay(
'https://upload.wikimedia.org/wikipedia/commons/e/ee/Dowarian%2C_Neelam_Valley%2C_AJK_Pakistan.JPG',
imageBounds);
overlay.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<div id="map-canvas"></div>
Hope that helps.
Good afternoon,
I'm trying to implement a Google Maps inside my SobiPro entries (SobiPro is a directory component for Joomla) but it's not working properly. My map is showing some parts with a grey color and after searching and finding a lot of solutions, I need you to ask for help because any of the other solutions worked.
I have tried everything and it's still not working.
Here is the URL, in the third label you will find my map "Direccion" is called: http://bdebeauty.es/component/sobipro/268
What can I do to solve this problem?
Edit with more code:
<style>
#map-canvas {
margin: 0px;
padding: 0px;
}
</style>
<script>
function initialize2() {
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
zoom: 4,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World!'
});
}
google.maps.event.addDomListener(window, 'load', initialize2);
</script>
<div id="map-canvas" style="width:450px;height:300px;"></div>
Thanks in advance.
I think what you will need is something like google.maps.event.trigger(map, 'resize');
as it is said in the documentation,
Developers should trigger this event on the map when the div changes size: google.maps.event.trigger(map, 'resize') .
I'm having a heck of a time trying to get a basic Google Map to show up. I've been on Stack Overflow for hours and haven't had any success so far. The closest I've gotten is the map loads 1/4 of a square, the top left quarter. But then if you try to drag, zoom, etc it just turns grey like the rest of the map. On a few occasions, with the same code, the map will load fully but only after a long time (not sure exactly how long, but > 5 minutes).
In my template I have
<div id="map" style="width: 500px; height: 400px;"></div>
And then in my backbone view
$.getScript('http://maps.google.com/maps/api/js?sensor=false&callback=gMapsCallback')
window.gMapsCallback = function(){
var myLatlng = new google.maps.LatLng(-34.397, 150.644);
var mapOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"),
mapOptions);
}
Any ideas what might be happening? I am also open to any suggestions on a superior way to load a google map into a backbone view.
Ok, turns out there were a number of issues, including embedding a map in a Bootstrap tab, not including a callback, defining the div height and width, setting a small delay to load the map, and setting css attributes for the map. Oi. My final solution turned out to be:
In the template
<script src='http://maps.google.com/maps/api/js?sensor=false&callback=gMapsCallback'></script>
<div id="map" style="width: 500px; height: 400px;"></div>
In the stylesheet
#map img {
max-width: none;
}
#map label {
width: auto; display:inline;
}
In the Backbone View
setTimeout(function(){
var myLatlng = new google.maps.LatLng(53.1, -2.44);
var mapOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"),
mapOptions);
// Create marker
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(53.1, -2.44),
title: 'The armpit of Cheshire'
});
// Add circle overlay and bind to marker
var circle = new google.maps.Circle({
map: map,
radius: 10000, // metres
fillColor: '#AA0000'
});
circle.bindTo('center', marker, 'position');
google.maps.event.trigger(map, "resize");
map.setZoom( map.getZoom() );
}, 100);
Painful. Notice that when I call the gmaps script I had to include the callback even though I never use it. Without it, it didn't work fully. No clue why.