i am working on google map api v3. map is perfectly showing on my page... problem is that when i resize the browser, map fit to its original size when i load the page...
initial state when i load the page
when i resize the browser, map is still sized at initial state size.
[Code]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<script src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type='text/javascript'>
var point;
var mrktx;
function mshow()
{
$("#search_content").css("display","");
}
function mhide()
{
$("#search_content").css("display","none");
}
function load() {
if(navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(ShowPosition)
}
else
{
alert("Browser does not support");
setTimeout( function(){ window.location = "../" },500);
}
function ShowPosition(position)
{
var lat = position.coords.latitude;
var lng = position.coords.longitude;
var cwidth = document.getElementsByTagName("body")[0].clientWidth;
var cheight = document.getElementsByTagName("body")[0].clientHeight;
//alert(cwidth + ',' + cheight);
$("#body").css("overflow","hidden");
$("#map_canvas").css("position","absolute");
$("#map_canvas").css("overflow","auto");
$("#map_canvas").css("height",cheight);
$("#map_canvas").css("width",cwidth);
$("#map_canvas").css("z-index","99")
$("#map_canvas").css("top","0");
$("#map_canvas").css("left","0em");
$("#top_nav").css("width",cwidth);
$("#top_nav").css("height","8%");
var latlng = new google.maps.LatLng(lat,lng);
var myOptions = {
zoom: 11,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
$('document').resize(function(){
google.maps.event.trigger(map, 'resize');
map.setZoom( map.getZoom() );
});
var myMrkrTxt = "";
var infowindow = new google.maps.InfoWindow({ content : myMrkrTxt });
var myMrkr = new google.maps.Marker({position:latlng,map:map});
google.maps.event.addListener(myMrkr,'mouseover', function(){ infowindow.open(map,myMrkrTxt); });
google.maps.event.trigger(map, "resize");
}
}
</script>
<style>
#top_nav
{
position: absolute; z-index: 200; top: 0px; background-color: black;
}
#top_nav h2
{
color: white;
}
body, html {
height: 100%;
width: 100%;
}
</style>
</head>
<body onload='load()'>
<div id="map_canvas"></div>
</body>
</html>
i guess you have to resize your map_canvas as well.
so just add this to your resize()
//its maybe better to attach this handler to the window instead of the document
$(window).resize(function(){
$('#map_canvas').css("height",$(window).height());
$('#map_canvas').css("width",$(window).width());
google.maps.event.trigger(map, 'resize');
map.setZoom( map.getZoom() );
});
so you have track of the resizing of your browserwindow :)
Same things can be done using only CSS too. I'll put an example below, use this if you like.
.google-maps {
position: relative;
padding-bottom: 75%;
height: 0;
overflow: hidden;
}
.google-maps iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}
<div class="google-maps">
<iframe src="https://www.google.com/maps/yourmapsblah" width="765" height="500" frameborder="3" style="border:0" allowfullscreen></iframe>
</div>
Related
I want to get Google Maps to show up in browser at full screen using reactjs.
My CSS:
html, body, #map_canvas { height: 100%; margin: 0; padding: 0; width:100%; height:100%;}
My component is defined as follows:
class GMap extends React.Component {
render() {
return (<div className="GMap">
<div ref="map_canvas" id="map_canvas">
</div>
</div>)
}
componentDidMount() {
var mapOptions = {
center: { lat: -34.397, lng: 150.644},
zoom: 8
};
var map_canvas = ReactDOM.findDOMNode(this.refs.map_canvas);
this.map = new google.maps.Map(map_canvas,
mapOptions);
}
}
My problem is that nothing shows up. If I specify in the CSS a width:500px and height:500px or some arbitrary value, I can see it, but if I don't, I don't see anything. I want to replicate this in React:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body, #map_canvas { height: 100%; margin: 0; padding: 0;}
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=API_KEY">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: { lat: -34.397, lng: 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 id="map_canvas"></div>
</body>
</html>
Also, on this line: <div ref="map_canvas" id="map_canvas"> Am I being redundant with ref and id?
I am using ES6, but am open to JSX solutions. I do not want to use any existing "react-google-map-library" for reasons that I want to simply use the existing library.
The problem is that you are setting #map_canvas to be 100% width and height of its parent, GMap which doesn't have a height or width defined as far as I can see.
If you create a fullscreen class, then you can just use it on both elements.
.fullscreen {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
/* extra fullscreen guarantees - you might not need the rest */
position: absolute;
top: 0;
left: 0;
}
You can also remove the redundant id and switch to the more updated version of the ref syntax.
createMap(element) {
var mapOptions = {
center: { lat: -34.397, lng: 150.644},
zoom: 8
};
this.map = new google.maps.Map(element, mapOptions);
}
render() {
return (
<div className="fullscreen GMap">
<div ref={this.createMap} className="fullscreen"></div>
</div>
);
}
In response to your other question — yeah, you can change this stuff conditionally in your render function. In fact, you don't need CSS at all.
render() {
const styles = {
width: window.innerWidth,
height: window.innerHeight
};
// you could also optionally use an alternate css class here.
return (
<div className="GMap">
<div ref={this.createMap} style={styles}></div>
</div>
);
}
For example , If you use embedded google map.
You can make your google map responsive with the code below
using iframe (simple iframe)
<div class="ggmap">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d212270.5451230493!2d-84.42060395!3d33.7677129!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x88f5045d6993098d%3A0x66fede2f990b630b!2sAtlanta%2C+GA!5e0!3m2!1sen!2sus!4v1396981185525" width="600" height="450" frameborder="0" style="border:0"></iframe>
</div>
.ggmap {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.ggmap iframe,
.ggmapr object,
.ggmap embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
However I use google map by javascript like this below.
no iframe (simple no-iframe)
<div id="map_canvas" style="width:600px; height:450px"></div>
function writeMap(latitude,longitude) {
var latlng = new google.maps.LatLng(latitude,longitude);
var opts = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), opts);
}
$(document).ready( function(){
writeMap(latitude,longitude);
});
In this case, google map could not be responsive.
How can I make this google map responsive??
Make the height and width percentages of the container (and make sure the container has a size).
var latitude = 42.0;
var longitude = -72.0;
function writeMap(latitude,longitude) {
var latlng = new google.maps.LatLng(latitude,longitude);
var opts = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), opts);
}
$(document).ready( function(){
writeMap(latitude,longitude);
});
body, html, #map_canvas {
height: 100%;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas" ></div>
Hi dear team and community of stack overflow, i search in developers google and i don't have answers to my problem, i create a route with google maps and fine works! but i when i push the marker this shows me the information of the direction and but i don't need its dangerous because this map can be see for the companies to search people for work and i don't have idea for how to hide or change tis information for example "Here is house of xxx" than "Av Avenida 98373, zap, jal, mx".
Im sorry for my bad english ! this is my code.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Directions service</title>
<style>
html, body, #map-canvas {
height: 80%;
margin: 0px;
padding: 0px
}
#panel {
position: absolute;
top: 5px;
left: 50%;
margin-left: -180px;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
}
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=MY_KEY_GMAPS&sensor=true&language=es"></script>
<script>
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var rendererOptions = {
map: map,
suppressMarkers : false,
suppressInfoWindow: false
}
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
var chicago = new google.maps.LatLng(41.850033, -87.6500523);
var mapOptions = {
zoom:7,
center: chicago
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
directionsDisplay.setMap(map);
}
var request = {
origin:'Av guadalupe 5765 zapopan jalisco',
destination:'Av Guadalupe 1010 zapopan jalisco',
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
document.getElementById('distance').innerHTML += response.routes[0].legs[0].distance.value + " meters";
document.getElementById('duration').innerHTML += response.routes[0].legs[0].duration.value + " seconds";
}
});
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body> <div id="map-canvas"></div>
</body>
<span id="distance"></span>
<span id="duration"></span>
</html>
<script language="javascript">
calcRoute();
showSteps();
</script>
You must set the suppressInfoWindows-option of the DirectionsRenderer to true.
This will avoid the automatic InfoWindows.
var rendererOptions = {
map: map,
suppressMarkers : false,
suppressInfoWindows: true
}
For a custom text you must use a custom InfoWindow-Instance (set it via the infoWindow-option of the DirectionsRenderer). Observe
the domready-event of this infoWindow and set the desired content.
I've been working with Google Maps for a while in my local development environment (I'm working on http://127.0.0.1:5000), but lately I'm getting this error:
Google has disabled use of the Maps API for this application. See the Terms of Service for more information: http://www.google.com/intl/en-US_US/help/terms_maps.html.
In my Google API Console I have created an Browser Key, and I've tried the following domains:
http://127.0.0.1/*
http://localhost/*
http://127.0.0.1:5000/*
http://0.0.0.0:5000/*
http://*:*/*
Obviously, not being about to see the map is making local development quite tricky. But I cannot figure out how to get around this. Can anyone point me at the correct configuration/approach to resolve this?
The documentation doesn't seem to talk about this sort of thing, which isn't helpful.
I got the same trouble, and the issue is to remove the key param in the adress as suggested by Mano Marks.
Just change
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&signed_in=true&callback=initMap"
async defer></script>
to
<script src="https://maps.googleapis.com/maps/api/js?signed_in=true&callback=initMap"
async defer></script>
Below is a full working code (HTML + JS)
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Reverse Geocoding</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
#floating-panel {
position: absolute;
top: 10px;
left: 25%;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
text-align: center;
font-family: 'Roboto','sans-serif';
line-height: 30px;
padding-left: 10px;
}
</style>
<style>
#floating-panel {
position: absolute;
top: 5px;
left: 50%;
margin-left: -180px;
width: 350px;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
}
#latlng {
width: 225px;
}
</style>
</head>
<body>
<div id="floating-panel">
<input id="latlng" type="text" value="40.714224,-73.961452">
<input id="submit" type="button" value="Reverse Geocode">
</div>
<div id="map"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: {lat: 40.731, lng: -73.997}
});
var geocoder = new google.maps.Geocoder;
var infowindow = new google.maps.InfoWindow;
document.getElementById('submit').addEventListener('click', function() {
geocodeLatLng(geocoder, map, infowindow);
});
}
function geocodeLatLng(geocoder, map, infowindow) {
var input = document.getElementById('latlng').value;
var latlngStr = input.split(',', 2);
var latlng = {lat: parseFloat(latlngStr[0]), lng: parseFloat(latlngStr[1])};
geocoder.geocode({'location': latlng}, function(results, status) {
if (status === google.maps.GeocoderStatus.OK) {
if (results[1]) {
map.setZoom(11);
var marker = new google.maps.Marker({
position: latlng,
map: map
});
infowindow.setContent(results[1].formatted_address);
infowindow.open(map, marker);
} else {
window.alert('No results found');
}
} else {
window.alert('Geocoder failed due to: ' + status);
}
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?signed_in=true&callback=initMap"
async defer></script>
</body>
</html>
First off, I don't know much about Google maps or Javascript and most of what I have so far is copied and pasted and stuck together from various tutorials (although I do understand what does what).
I have a map showing markers based on their location from a spreadsheet (via JSON feed). In this spreadsheet I also have a numerical value stored for each marker in data[i][4].
Finally have a bog standard html input type range slider and have the value of this stored in a global variable (slidervalue) that constantly updates as the slider moves.
As the slider moves, if the numerical value stored in the data for a marker is less than slidervalue that marker should be visible. If the data value is greater than slidervalue that marker should be hidden.
I assume this can be achieved using an if else statement and Google maps setvisible.
Here is my code so far:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Pound A Pint</title>
<style>
html, body {
margin: 0;
padding: 0;
width:100%;
height: 100%;
}
#map_canvas {
height: 100%;
width: calc(100% - 200px);
float:right;
}
#name {
float:left;
}
#price {
float:left;
}
#sliderAmount {
background-color: red;
display: inline-block;
}
</style>
<script src="https://maps.google.com/maps/api/js?sensor=false"></script>
<script>
// The web service URL from Drive 'Deploy as web app' dialog.
var DATA_SERVICE_URL = "https://script.google.com/macros/s/AKfycbwFFhKaVFHsr1g6sokrXd1kXPU0mbdKZzpVXE00X4CzS0nfng/exec?jsonp=callback";
var map;
var image = 'icon.png';
var slidervalue = 400;
function myFunction()
{
document.getElementById("sliderAmount").innerHTML= slidervalue;
}
function initialize() {
map = new google.maps.Map(document.getElementById('map_canvas'), {
center: new google.maps.LatLng(51.5, -0.1),
zoom: 12,
mapTypeControl: false,
panControl: false,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.default,
position: google.maps.ControlPosition.LEFT_BOTTOM
}
});
var scriptElement = document.createElement('script');
scriptElement.src = DATA_SERVICE_URL;
document.getElementsByTagName('head')[0].appendChild(scriptElement);
}
function callback(data) {
for (var i = 0; i < data.length; i++) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(data[i][3], data[i][2]),
map: map,
icon: image
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
document.getElementById("name").innerHTML= data[i][0];
document.getElementById("pricespan").innerHTML= data[i][4];
}
})(marker, i));
}
}
function updateSlider(slideAmount) {
slidervalue = slideAmount;
document.getElementById("slidervalue").innerHTML = slidervalue;
}
</script>
</head>
<body onload="initialize()">
<div id="name">Name</div>
<div id="price">£<span id="pricespan"></span></div>
<input id="slide" type="range" min="1" max="500" step="1" value="400" onchange="updateSlider(this.value)">
<div onclick="myFunction()" id="sliderAmount">Click me</div>
<div id="slidervalue"></div>
<div id="map_canvas"></div>
</body>
</html>
Thanks for any help.
create a global accessible array:
markers=[];
store the markers in this array, and store the numeric value as a property of the markers:
var marker = new google.maps.Marker({
position: new google.maps.LatLng(data[i][3], data[i][2]),
map: map,
value:data[i][4],
visible:slidervalue >= data[i][4]
});
markers.push(marker);
in updateSlider iterate over the array and set the visible-property depending on the comparision:
function updateSlider(slideAmount) {
for(var i=0;i<markers.length;++i){
markers[i].setVisible(slideAmount>=markers[i].get('value'));
}
slidervalue = slideAmount;
document.getElementById("slidervalue").innerHTML = slidervalue;
}