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.
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>
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.
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"/>
Im loading a google map. The html is:
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js"></script>
<style type="text/css">
html, body, #map-canvas {
margin: 0;
padding: 0;
height: 100%;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&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"></div>
This displays fine. However, if I wrap the map-canvas div in a div, nothing displays!
<div>
<div id="map-canvas"></div>
</div>
I can see in firebug the google map html gets rendered but nothing is visible...
To be able to display the map with it's height set to 100%, all parent tags must have their height set to 100%.
That being said, the map's parent div height also needs to be 100%.
html, body, #map-canvas, #map_container {
margin: 0;
padding: 0;
height: 100%;
}
And the code for the map and the div
<div id="map_container">
<div id="map-canvas"></div>
</div>
After this everything should work fine.
Try to put directly remove outside <div> tag
<div id="map-canvas"></div>
put like above
my google maps script is gray when load the page, when I open the inspector of elements seen, I think it's for the resize, you can be? Thanks friends, I expect an answer. Here you have all the html of what would be the map, then this is included within a div. The strange thing is that when you resize the screen, is observed. I need help!!!!
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#googleMap {
width: 100%;
height: 600px;
margin-top: 6.5%;
overflow:visible;
}
img, embed, object, video {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js? key=AIzaSyCbVI4cT8PjwlmV0pZfK961MGnd6H3aGoY&signed_in=false"> </script>
<script>
var myCenter=new google.maps.LatLng(39.287649, -0.422548);
var myCenterverd=new google.maps.LatLng(39.287413, -0.422255);
var myCenterroig=new google.maps.LatLng(39.288497, -0.423953);
var myCentergroc=new google.maps.LatLng(39.287766, -0.421604);
function initialize() {
var mapOptions = {
center:new google.maps.LatLng(39.287413, -0.422255),
zoom:8,
mapTypeId:google.maps.MapTypeId.ROADMAP,
//disableDefaultUI: true
};
var map=new google.maps.Map(document.getElementById("googleMap"), mapOptions);
//var marker=new google.maps.Marker({position:myCenter,icon:'gotaico.png'});
var markerverd=new google.maps.Marker({position:myCenterverd,icon:'../dashboard/include/Mapa/iconosrellenos/gotaicoverd.png'});
var markerroig=new google.maps.Marker({position:myCenterroig,icon:'../dashboard/include/Mapa/iconosrellenos/gotaicoroig.png'});
var markergroc=new google.maps.Marker({position:myCentergroc,icon:'../dashboard/include/Mapa/iconosrellenos/gotaicogroc.png'});
//marker.setMap(map);
markerverd.setMap(map);
markerroig.setMap(map);
markergroc.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap"></div>
</body>
</html>
It seems that the following styles are causing the error:
img,
embed,
object,
video {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}
Remove these and it will work: https://jsfiddle.net/cug0an68/1/
Ps, you may want to set up a new api key as you have made this one publicly available