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
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.