This question already has answers here:
Google maps API V3 method fitBounds()
(4 answers)
Closed 6 years ago.
I basically want to create maps which zoom in to the size corresponding to the SE-NW corners. I have tried so many variations but have not been able to get it to work. I managed to place two markers on one version of my script but was not able to make the map zoom in to the size of the markers. I don't need markers, I was just thinking outside the box. I will include my sort of working script below but would appreciate any help with making the fitBounds to work. I have worked solidly on this for two days, but I am not a programmer so much of the solutions I have found on this website and others don't quite make sense, or they don't address my exact problem.
<!DOCTYPE html>
<!-- This script works, but the size of the output should be as per the SW-NE coordinates -- not the 'div style width/height', and ignoring the center:coordinates -->
<!-- This is one of several maps I am planning to create but I don't mind typing in the fitBounds coordinates by hand -->
<html>
<head>
<title>Google Road Maps</title>
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
var mapProp = {
center:new google.maps.LatLng(56.3,4.3),
zoom:8,
mapTypeId:google.maps.MapTypeId.ROADMAP,
disableDefaultUI:true,
scaleControl: true
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
var fitBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(53.3,-0.7),
new google.maps.LatLng(59.3,9.3)
);
</script>
</head>
<body>
<div id="googleMap" style="width:600mm;height:600mm;"></div>
</body>
</html>
You need to call Map.fitBounds with your fitBounds object.
map.fitBounds(fitBounds);
proof of concept fiddle
code snippet:
function initialize() {
var mapProp = {
center: new google.maps.LatLng(56.3, 4.3),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true,
scaleControl: true
};
var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
map.fitBounds(fitBounds);
}
google.maps.event.addDomListener(window, 'load', initialize);
var fitBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(53.3, -0.7),
new google.maps.LatLng(59.3, 9.3)
);
html,
body,
#googleMap {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="googleMap"></div>
Related
I'm using Squarespace to build my website and want to insert a custom map from google maps javascript api. I've already gotten google api key.
I've followed steps as below :
What I'm trying to archive is just to show a google map on my web.
Step 1: Insert a embed block for html
<div id="map_canvas"></div>
Step 2: insert javascript in page header
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=my-key&sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
Step 3 : in custom css section
#map_canvas
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px
}
But the codes I put on Squarespace didn't work. How should I do?
Here the link to my webpage on SquareSpace
Your Site Title
Thanks!!
LoL, u put the script at a very wrong place i think.
1st. put your script, all of it after </body>
2nd. you need a cover for your maps <div> like a wrapper or so to put it in center. and using a cover/wrapper div you can manipulate the size and the shape.
3rd. i don't know id="maps_canvas". because from google i got this <div id='gmap_canvas' style='height:100%;width:100%; position:static'>, it was gmap_canvas. and put style in it to make them fit with your cover/wrapper div.
easier way: http://embedgooglemaps.com/en/
perhaps it'll help. :)
This is what I changed in my code as below :
Step 1: Insert a code block for html <-- it was not embed block, but code block. I mistyped before.
<div id="mapWrapper">
<div id='gmap_canvas' style='height:100%;width:100%; position:static'>
</div>
</div>
Step 2: insert javascript in page header.
I change only ID name from 'map_canvas' to 'gmap_canvas'
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=my-key&sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('gmap_canvas'), myOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
Step 3 : in custom css section.
Changed ID name from 'map_canvas' to 'mapWrapper', then set another size.
#mapWrapper
{
width: 750px;
height: 500px;
margin: 0px;
padding: 0px
}
I tried to put most of everything people advised me, but still the map doesn't come up on my site.
Is there something wrong yet?
I did the same thing with my site.
What I did differently is not put my #map-canvas within a wrapper. While previewing your site, are you able to find your gmap_canvas with the inspect view? It may be that the content is there, just not displaying properly.
My code:
The following is in the page header code injection box. Note that a large bit of this code (and I don't remember which parts since I don't know JS) is just to keep the pin centered on different screen sizes.
<style type="text/css">
html, body, #map-canvas {
height: 400px;
width 960px;
margin: 0;
padding: 0;}
#banner-area-wrapper {
display: none;
}
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=my_key&callback=initMap">
</script>
<script type="text/javascript">
function detectBrowser() {
var useragent = navigator.userAgent;
var mapdiv = document.getElementById("map-canvas");
if (useragent.indexOf('iPhone') != -1 || useragent.indexOf('Android') != -1 ) {
mapdiv.style.width = '100%';
mapdiv.style.height = '100%';
} else {
mapdiv.style.width = '600px';
mapdiv.style.height = '800px';
}
}
function initialize() {
var myLatLng = {lat: 39.910073, lng: -82.965509};
var mapOptions = {
center: myLatLng,
zoom: 14,
panControl: false,
mapTypeControl: false,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.DEFAULT,
position: google.maps.ControlPosition.LEFT_CENTER},
streetViewControl: false
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Opportunity Center'
});
google.maps.event.addDomListener(window, "resize", function() {
var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);
});
}
On the page, I have a code block, with the following in it:
<div id="map-canvas" style="width:90%;margin:auto;"></div>
Note that I did not put my #map-canvas inside a wrapper, nor include anything in the custom CSS.
I made a quick dummy site, and replicated your failure to show the map, but I don't know quite enough about Squarespace to say exactly why. I'd start with copying my code and see if that works for you - seems like the big difference is your wrapper around the canvas.
I want to show location in Google map using JavaScript, but when I zoom out, it shows multiple maps! Also, the map is not fixed in the browser window.
How can I fixate it to the window and force it to show just one map?
<!DOCTYPE html>
<html>
<head>
<title>My Location:</title>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<script type='text/javascript' src='http://maps.google.com/maps/api/js?sensor=false&language=en'></script>
<script type='text/javascript'>
var map;
function loadMap(lat,lng) {
var myOptions = {
zoom: 16,
center: new google.maps.LatLng(lat,lng),
mapTypeId: google.maps.MapTypeId.ROAD ,
//scrollwheel: false,
//disableDoubleClickZoom: true,
minZoom: 1
};
map = new google.maps.Map(document.getElementById('my_location'), myOptions);
map.streetViewControl=true;
//window.onresize = google.maps.event.trigger(map, 'resize');
}
window.addEventListener('resize', function(){
google.maps.event.trigger(map,'resize');
});
</script>
</head>
<body onload='loadMap(46.518465, 6.5,45,7)'>
<div class='fd'>
<div class='cd'>
<div id='my_location' class='shadow' style='width:600px;height:260px;'></div>
</div>
</div>
</body>
</html>
Edit :
I have uploaded my page screen shot here :
one : is when my page is loaded.
two : is when I zoom out and resize the window.
three : is when I move map to scroll it.
as you see, in two I have three map ! and in three map didn't fix to its div!
Edit2:
I upload my code!
Your question is not really clear. Could you please provide further explanation of the issue?
Resizing the map on div change
From API reference:
Developers should trigger this event on the map when the div changes
size: google.maps.event.trigger(map, 'resize') .
All you have to do is trigger this event when your window resizes e.g. window.onresize
Adding listener
window.addEventListener('resize', function(){
google.maps.event.trigger(map,'resize');
});
Displaying the map div
Put this in the <head> of your document.
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#my_location{ height: 100% }
</style>
From what I can tell, you are concerned that at the highest zoom levels three copies of the map are shown? This is standard to Google Maps and basically all webmaps. If you don't want that, you could investigate making a custom map with Kartograph.
If you are trying to stop zooming, change to the following code:
var myOptions = {
zoom: 16,
center: new google.maps.LatLng(lat,lng),
mapTypeId: google.maps.MapTypeId.ROAD ,
scrollwheel: false,
disableDoubleClickZoom: true,
minZoom: 1
};
Other than that, I'm not sure what you are asking.
Hi i am new to google street view api and javascript. i am trying to write a code through which i can rotate the image in street view at a particular longitude and latitude. the angle doesn't matter....here is the code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Street View service</title>
<link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
//this for loop is for rotating the image.
for(var i=0;i<15;i++) {
function initialize() {
var fenway = new google.maps.LatLng(42.345573,-71.098326);
var mapOptions = {
center: fenway,
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(
document.getElementById('map-canvas'), mapOptions);
var panoramaOptions = {
position: fenway,
pov: {
heading: 0+10*i,
pitch: 10
}
};
var panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'),panoramaOptions);
map.setStreetView(panorama);
//this loop is for waiting the image to load..i know this is not efficient but just wanted to give ample time for image to load
for(var k=0;k<10000;k++){}
}
google.maps.event.addDomListener(window, 'load', initialize);
}
</script>
<div id="pano" style="position:absolute; left:10px; top: 8px; width: 1300px; height: 670px;"></div>
<div id="map-canvas" style="left:1100px; top: 450px;width: 200px; height: 200px"></div>
when i execute the whole code..only a image at particular angle comes..it doesn't rotate.
Can you please help me? :)
Take a look at my question and myself answer at this link. It doesn't rotate interactively, but the street view view is set for watching the point at lat,long. I hope it is what you need.
Google Maps Api StreetView PanoramaOptions Point of View Setting from Lon Lat
I'm updating some old code to Google Maps API v3, and I can't get the map to show anything. Dumping the map object to the console shows the map has been initialized properly and it is supposed to be loading in the proper div-- but nothing shows except a grey box.
I have set width/height and overflow for the map div, since this seems to be the most common problem.
However, I can't get this to work. Any ideas?
http://jsfiddle.net/Nbjrf/1/
Thanks
<!DOCTYPE html>
<html>
<head>
<title>Google Maps JavaScript API v3 Example: Map Simple</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<style>
#map_canvas { height: 200px; width: 400px; overflow: visible; }
</style>
</head>
<body>
<div id="map_canvas"></div>
<script>
var myLatlng = new google.maps.LatLng(-34.397, 150.644);
var mapOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.HYBRID
};
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
</script>
</body>
</html>
This works for me.
There is a big difference between
var maptype = 'google.maps.MapTypeId.HYBRID';
var mapInitOpts = {
mapTypeId: maptype
};
and
var mapInitOpts = {
mapTypeId: google.maps.MapTypeId.HYBRID
};
In 1 instance you are asigning to mapTypeId the text 'google.maps.MapTypeId.HYBRID' and the other you are assigning to mapTypeId the value of the variable google.maps.MapTypeId.HYBRID.
For your example to work you should at least put
var maptype = google.maps.MapTypeId.HYBRID;
not
var maptype = 'google.maps.MapTypeId.HYBRID';
Also I cannot make my example to work without zoom: and center: . Those might be required.
You had the mapTypeId constant in quotes, 'google.maps.MapTypeId.HYBRID'; it's a constant, not a string: google.maps.MapTypeId.HYBRID
Also, you need to supply a map centre, and a zoom level. This works:
var mapInitOpts = {
mapTypeId: google.maps.MapTypeId.HYBRID,
center: new google.maps.LatLng(-32.891058,151.538042),
zoom: 16
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapInitOpts);
Finally, you don't need to supply an API key any more.
Hi everyone I try to use geolocalization for my webside made with joomla
I obtained the latitude and longitude and fine... But dont show me any map
In my code I am drawing the map inside a div
this is my code
<script type="text/javascript">
function init() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var myLatlng = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
var mapOptions= {
zoom: 14,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
var marcador = new google.maps.Marker();
marcador.setPosition(pos);
marcador.setMap(map);
}, function() {
alert("su navegador no acepta geolocalización");
});
}
}
google.maps.event.addDomListener(window, 'load', init);
</script>
in my head I have this
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js?ver=3.1.2'></script>
and his in my body
<div id="map"></div>
I have been read other post with the same problem, but I don't find the error in my code.
Thanks
There are some small errors in your code - hint: try using the Javascript console in Chrome to see these errors:
You do not have 'pos' defined here: marcador.setPosition(pos);
...and you want to create a marker with it, so you have to use the LatLng object
give your div a width and height (if you have not done it in your CSS file)
Here is a JSFiddle with all there errors fixed
Where is pos defined? This will most likely cause a JS error which will prevent the map displaying.
marcador.setPosition(pos);
Give your div a size(width and height):
<div id="map" style="width:400px;height:300px"></div>
You need to set width and height values for your #map and make sure the init() is called
here my jsfiddle : http://jsfiddle.net/3MTtc/1/