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>
Related
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.
I have been trying to find a way to set the location on peg man in google maps via programming instead of dragging and dropping.Is there a way to set the location of pegman on google maps programmatically?
better late than never, but you're looking for the pano function setPosition
setStreetView sets the pano view, but setPosition should place pegman.
May be the below code will be helpful to you :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Street View service</title>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
function initialize() {
var fenway = new google.maps.LatLng(42.345573, -71.098326);
var mapOptions = {
center: fenway,
zoom: 14
};
var map = new google.maps.Map(
document.getElementById('map-canvas'), mapOptions);
var panoramaOptions = {
position: fenway,
pov: {
heading: 34,
pitch: 10
}
};
var panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'), panoramaOptions);
map.setStreetView(panorama);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas" style="width: 400px; height: 300px"></div>
<div id="pano" style="position:absolute; left:410px; top: 8px; width: 400px; height: 300px;"></div>
</body>
</html>
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.