I have a simple map with zoom level 4 at this point. Zoom level 5 is too big for me. Ideally, I'd like 4.6 zoom level which is possible in iOS SDK for Google maps.
Is there a way on how I can set the zoom level to 4.6? I want the map to occupy full page, so cannot really put in a div and use that part of it.
The objective is to show full USA in the center.
<!DOCTYPE html>
<html>
<head>
<meta content="initial-scale=1.0, user-scalable=no" name="viewport">
<meta charset="utf-8">
<title>Map example</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var layer;
var layer1;
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 5,
center: {lat: 39.8282, lng: -98.5795}
});
}
</script>
<script async defer src=
"https://maps.googleapis.com/maps/api/js?key=AIzaSyBMtoh9P3UkoxbXndKu_HOP7KsVwTRvxGU&callback=initMap">
</script>
</body>
</html>
You can use CSS zoom to make your map fits your need.
For example, set Google map zoom to 4, then set #map zoom to 1.15 (because you want Google map zoom to 4.6 = 1.15 * 4)
<html>
<head>
<meta content="initial-scale=1.0, user-scalable=no" name="viewport">
<meta charset="utf-8">
<title>Map example</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
zoom: 1.15;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: {lat: 39.8282, lng: -98.5795}
});
}
</script>
<script async defer src=
"https://maps.googleapis.com/maps/api/js?key=AIzaSyBMtoh9P3UkoxbXndKu_HOP7KsVwTRvxGU&callback=initMap">
</script>
</body>
</html>
Zoom levels on Google Maps are integers. Full stop. Your only option is to change the size of the div that contains the google.maps.Map object.
Related
Is there any way I can get traffic information at a particular point on map? If google doesnt have it, are Bing or Here traffic apis accurate?
As per comment - there is a traffic layer available - an example below of how to apply it.
<!doctype html>
<html>
<head>
<meta charset='utf-8'>
<title>Using a Traffic layer in Google Maps</title>
<style>
#map {
width:800px;
height:600px;
float:none;
margin: 0 auto;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id='map'></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
center: {lat:51.521473, lng:-0.134587 }
});
var traffic = new google.maps.TrafficLayer();
traffic.setMap( map );
}
</script>
<script async defer src="//maps.googleapis.com/maps/api/js?key=<APIKEY>&callback=initMap"></script>
</body>
</html>
Is there a built-in option in the google maps API or simple way to implement this functionality. I want to double click a spot on the map and have google maps move my marker to that spot.
(Edit: look at Vinks' post. He points out Google maps has a disableDoubleClickZoom option.)
Sure
<!DOCTYPE html>
<html>
<head>
<title>Double click on the map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
height: 500px;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script>
<script>
function initialize() {
var my_position = new google.maps.LatLng(50.5, 4.5);
var map = new google.maps.Map(document.getElementById('map-canvas'), {
center: my_position,
zoom: 15
});
var marker = new google.maps.Marker({
position: my_position,
map: map
});
// double click event
google.maps.event.addListener(map, 'dblclick', function(e) {
var positionDoubleclick = e.latLng;
marker.setPosition(positionDoubleclick);
// if you don't do this, the map will zoom in
e.stopPropagation();
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
<p>Double click on the map</p>
</body>
</html>
I can't comment Emmanuel Delay answer, but in order to correct the stopPropagation issue, you must use the disableDoubleClick option of Maps API.
Here is the updated result :
<!DOCTYPE html>
<html>
<head>
<title>Double click on the map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
height: 500px;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script>
<script>
function initialize() {
var my_position = new google.maps.LatLng(50.5, 4.5);
var map = new google.maps.Map(document.getElementById('map-canvas'), {
center: my_position,
disableDoubleClickZoom: true,
zoom: 15
});
var marker = new google.maps.Marker({
position: my_position,
map: map
});
// double click event
google.maps.event.addListener(map, 'dblclick', function(e) {
var positionDoubleclick = e.latLng;
marker.setPosition(positionDoubleclick);
// if you don't do this, the map will zoom in
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
Simple question here. I'm learning Web dev and I would like to create a border with a title and beneath it I want to put a google map view. Here is what I have in my css file "mystyle.css":
html{
height: 100%;
}
div.map{
height: 50%;
width: 50%;
}
div.title{
width: 100%;
height: 100%;
border: 5px solid blue;
margin: 0px;
text-align: center;
}
#map-canvas {
height: 50%;
width: 50%;
}
Then on my index.html this is what I have:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>Google Maps Hello World</title>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?MY_MAP_KEY&sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div class="title"><h1>Google Maps Test</h1></div>
<div id="map-canvas"/>
</body>
My problem is that all I can see is the blue border with the text "Google Maps Test" I can't see the map view. Strangely enough, if I rename div.title to body, then I can see the map. Any idea what i'm doing wrong?
Try using
#map-canvas {
height:300px;
width:300px;
}
instead of
#map-canvas {
height: 50%;
width: 50%;
}
And use <div id="map-canvas"></div>
instead of
<div id="map-canvas"/>
The bellow component is giving returning blank(but its printing the value "Hellow all") when used in a visualforce page ..but when used in a plain html in my local machine is returning the map. Please advice
<apex:component >
Hello all
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 100% }
</style>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 100% }
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=KeyXXXX&sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"/>
</body>
</apex:component>
Thanks,
Sandy
Trouble is with Salesforce's styles
Embed your component inside a VisualForce page without side bar, headers or styles (standardStylesheets="false" showHeader="false" sidebar="false"), then iframe this page inside another page with all styles, that will work.
Hey eveyrone currently i have gotten a Google Maps key with the url http://localhost/
that went through fine but i get an error stating that i need to select a true or false sensor. i haev already chosen one and used it. tried both true and false. here is my code
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=API_KEY_IS_SPECIFIED_JUST_REMOVED_FOR_THIS_QUESTION&sensor=FALSE">
</script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
Maybe it's case sensitive (always assume things are unless you know otherwise). Try false instead of FALSE.