I can't figure out how to set a div containing the Google Maps map and another one containing a menu.
I want to display both divs inline and set the map to auto adjust according to the screen resolution.
#map {
height: 100%!important;
width: 100%;
position: fixed!important;
display: inline-block!important;
float: right;
min-height: 100%;
}
#admin-panel{
background-color:#212121;
color:#8c8c8c;
height: 100%!important;
position: fixed;
display: inline-block;
z-index: 1;
}
<script>
var map; //<-- This is now available to both event listeners and the initialize() function
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-23.460347, -45.089335),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map"),
mapOptions, {size:"100%"});
}
google.maps.event.addDomListener(window, 'load', initialize);
google.maps.event.addDomListener(window, "resize", function() {
var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);
});
</script>
<script src="https://maps.googleapis.com/maps/api/js? callback=initialize"
async defer>
</script>
Thankyou for the help guys !
Related
Current behaviour: The page constantly refreshes my location and the entire map.
Desired behaviour: I only want to find and display the current location once, not continuously.
How can I achieve this?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>whereami</title>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 100% }
</style>
<script type="text/javascript" src="cordova.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key= xyz " type="text/javascript"></script>
<script type="text/javascript">
function onSuccess(position) {
var lat=position.coords.latitude;
var lang=position.coords.longitude;
var myLatlng = new google.maps.LatLng(lat,lang);
var mapOptions = {zoom: 17,center: myLatlng}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({position: myLatlng,map: map});
}
function onError(error) {}
var watchID = navigator.geolocation.watchPosition(onSuccess, onError, { timeout: 0 });
google.maps.event.addDomListener(window, 'load', onSuccess);
</script>
</head>
<body>
<div id="geolocation"></div>
<div id="map-canvas"></div>
</body>
</html>
Don't keep recreating the map. Create the map once (in an "initMap" function), center the map an place the marker in the watchPosition callback function.
jsfiddle
// global variables
var map, marker, polyline;
function initMap() {
// initialize the global map variable
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: {
lat: 0,
lng: 0
},
zoom: 1
});
var watchID = navigator.geolocation.watchPosition(onSuccess, onError, {
timeout: 5000
});
}
google.maps.event.addDomListener(window, 'load', initMap);
function onSuccess(position) {
var lat = position.coords.latitude;
var lang = position.coords.longitude;
var myLatlng = new google.maps.LatLng(lat, lang);
map.setCenter(myLatlng);
map.setZoom(18);
if (marker && marker.setPosition)
marker.setMap(myLatlng); // move the marker
else // create a marker
marker = new google.maps.Marker({
position: myLatlng,
map: map
});
}
function onError(error) {
console.log('ERROR(' + error.code + '): ' + error.message);
}
html {
height: 100%;
width: 100%;
}
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0
}
#map-canvas {
height: 100%;
width: 100%;
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="geolocation"></div>
<div id="map-canvas"></div>
I have found this icon: http://chart.apis.google.com/chart?cht=mm&chs=60x102&chco=ffffff,70a3c1,70a3c1&ext=.png
I'm wondering if it's possible to place text on this icon. Basically what I'm looking for is an icon with a dynamic color and text. A simple PHP script that dynamically generates an icon based on a images and text would also be great.
You can create image from png (using PHP GD )
$yourimage = imagecreatefrompng($originalImage);
Add in your html page this tag
<img src="test_icon.php?text=yourtext">
and the add the text you need
this way using test_icon.php
test_icon.php
<?php
header("Content-type: image/png");
$yourOrigImage = "group_icon.png";
if(file_exists($yourOrigImage)) {
$newImage = imagecreatefrompng($yourOrigImage);
imagesavealpha($newImage, true); // this for keep the png's transparency important
if(!$newImage) {
die("im is null");
}
$black = imagecolorallocate($newImage, 0, 0, 0);
$width = 36; // the width of the image
$height = 36; // the height of the image
$font = 4; // font size
$text = $_GET['text']; // text
$leftTextPos = 4;
$outputImage = "group_icon_".$text.".png";
imagestring($newImage, $font, $leftTextPos, 9, $text, $black);
imagepng($newImage, $outputImage, 0);
imagedestroy($newImage);
}
?>
Two options:
The third party MarkerWithLabel library.
fiddle
code snippet:
var map;
function initialize() {
var map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new MarkerWithLabel({
position: map.getCenter(),
map: map,
icon: "http://chart.apis.google.com/chart?cht=mm&chs=60x102&chco=ffffff,70a3c1,70a3c1&ext=.png",
labelContent: "A",
labelAnchor: new google.maps.Point(15, 90),
labelClass: "labels", // the CSS class for the label
labelInBackground: false
});
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
.labels {
color: black;
font-family: "Lucida Grande", "Arial", sans-serif;
font-size: 30px;
text-align: center;
width: 30px;
white-space: nowrap;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerwithlabel/src/markerwithlabel.js"></script>
<div id="map_canvas"></div>
Add a label to the native google.maps.Marker
fiddle
code snippet::
var map;
function initialize() {
var map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: map.getCenter(),
map: map,
icon: "http://chart.apis.google.com/chart?cht=mm&chs=60x102&chco=ffffff,70a3c1,70a3c1&ext=.png",
label: "A"
});
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>
How to make a responsive google map from the code
<div class="map">
<iframe>...</iframe>
</div>
I use in css for full map
.map{max-width:100%;}
and small device
.map{max-width:40%;}
but it didn't work.
Anyone have idea? Thank you.
Add this to your initialize function:
<script type="text/javascript">
function initialize() {
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
// Resize stuff...
google.maps.event.addDomListener(window, "resize", function() {
var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);
});
}
</script>
Adding a 100% to the width and height attributes of its iframe has always worked for me. For example
<iframe width="100%" height="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.co.in/maps?f=q&source=s_q&hl=en&geocode=+&q=surat&ie=UTF8&hq=&hnear=Surat,+Gujarat&ll=21.195,72.819444&spn=0.36299,0.676346&t=m&z=11&output=embed"></iframe><br />
A solution without javascript:
HTML:
<div class="google-maps">
<iframe>........//Google Maps Code//..........</iframe>
</div>
CSS:
.google-maps {
position: relative;
padding-bottom: 75%; // This is the aspect ratio
height: 0;
overflow: hidden;
}
.google-maps iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}
If you have a custom map size, remove the "height: 100% !important"
It's better to use Google Map API.
I've created an example here: http://jsfiddle.net/eugenebolotin/8m1s69e5/1/
Key features are using of functions:
//Full example is here: http://jsfiddle.net/eugenebolotin/8m1s69e5/1/
map.setCenter(map_center);
// Scale map to fit specified points
map.fitBounds(path_bounds);
It handles resize event and automaticaly adjusts size.
in the iframe tag, you can easily add width='100%' instead of the preset value giving to you by the map
like this:
<iframe src="https://www.google.com/maps/embed?anyLocation" width="100%" height="400" frameborder="0" style="border:0;" allowfullscreen=""></iframe>
Check this for a solution: http://jsfiddle.net/panchroma/5AEEV/
I can't take the credit for the code though, it comes from quick and easy way to make google maps iframe embed responsive.
Good luck!
CSS
#map_canvas{
width:50%;
height:300px !important;
}
HTML
<!DOCTYPE html>
<html>
<head>
<title>Google Maps JavaScript API v3 Example: Map Simple</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
<meta charset="utf-8"/>
<style>
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>
var map;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
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>
Here a standard CSS solution + JS for the map's height resizing
CSS
#map_canvas {
width: 100%;
}
JS
// On Resize
$(window).resize(function(){
$('#map_canvas').height($( window ).height());
JsFiddle demo : http://jsfiddle.net/3VKQ8/33/
i think the simplest way will be to add this css and it will work perfectly.
embed, object, iframe{max-width: 100%;}
My Responsive [Solution] Google Map in Foundation 4 Modal
JS
Create an external JavaScript file (i.e. mymap.js) with the following code
google.maps.visualRefresh = true; //Optional
var respMap;
function mymapini() {
var mapPos = new google.maps.LatLng(-0.172175,1.5); //Set the coordinates
var mapOpts = {
zoom: 10, //You can change this according your needs
disableDefaultUI: true, //Disabling UI Controls (Optional)
center: mapPos, //Center the map according coordinates
mapTypeId: google.maps.MapTypeId.ROADMAP
};
respMap = new google.maps.Map(document.getElementById('mymap'),
mapOpts);
var mapMarker = new google.maps.Marker({
position: mapPos,
map: respMap,
title: 'You can put any title'
});
//This centers automatically to the marker even if you resize your window
google.maps.event.addListener(respMap, 'idle', function() {
window.setTimeout(function() {
respMap.panTo(mapPos.getPosition());
}, 250);
});
}
google.maps.event.addDomListener(window, 'load', mymapini);
$("#modalOpen").click(function(){ //Use it like <a href="#" id="modalOpen"...
$("#myModal").show(); //ID from the Modal <div id="myModal">...
google.maps.event.trigger(respMap, 'resize');
});
HTML
Add the following code before the tag:
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script src="js/mymap.js"></script>
Add this to the modal code:
<div id="mymap"></div>
CSS
Add this to your stylesheet:
#mymap { margin: 0; padding: 0; width:100%; height: 400px;}
Tried it with CSS, but its never 100% responsive, so I built a pure javascript solution. This one uses jQuery,
google.maps.event.addDomListener(window, "resize", function() {
var center = map.getCenter();
resizeMap();
google.maps.event.trigger(map, "resize");
map.setCenter(center);
});
function resizeMap(){
var h = window.innerHeight;
var w = window.innerWidth;
$("#map_canvas").width(w/2);
$("#map_canvas").height(h-50);
}
My solution based on eugenemail response:
1. HTML - Google Maps API
Get API Key
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>
2. HTML - Canvas
<div id="map_canvas"></div>
3. CSS - Map canvas
#map_canvas {
height: 400px;
}
4. JavaScript
function initialize() {
var lat = 40.759300;
var lng = -73.985712;
var map_center = new google.maps.LatLng(lat, lng);
var mapOptions = {
center: map_center,
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var mapCanvas = document.getElementById("map_canvas");
var map = new google.maps.Map(mapCanvas, mapOptions);
new google.maps.Marker({
map: map,
draggable: false,
position: new google.maps.LatLng(lat, lng)
});
google.maps.event.addDomListener(window, 'resize', function() {
map.setCenter(map_center);
});
}
initialize();
I am an amateur but I found this worked:
.maps iframe {
position: absolute;
}
body {
padding-top: 40px;
padding-bottom: 820px;
height: available;
}
There may be a bit of whitespace at the bottom but I am satified
Responsive with CSS
You can make the Iframe responsive with the following CSS codes.
.map {
position: relative;
padding-bottom: 26.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.map iframe,
.map object,
.map embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Responsive with JavaScript
This possible through window.resize event and you can apply this on google map like google.maps.event.addDomListener(window, 'resize', initialize);
Consider the following example:
function initialize() {
var mapOptions = {
zoom: 9,
center: new google.maps.LatLng(28.9285745, 77.09149350000007),
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById('location-canvas'), mapOptions);
var marker = new google.maps.Marker({
map: map,
draggable: false,
position: new google.maps.LatLng(28.9285745, 77.09149350000007)
});
}
google.maps.event.addDomListener(window, 'resize', initialize);
Take a look for more details - https://webomnizz.com/how-to-make-responsive-google-map-with-google-map-api/
I'm trying to make a side by side Google Fusion Map and while that seems to be working OK, when I click on a polygon, the info window shows up as blank.
I'm trying to work out why it might not be picking up and displaying the information from the table, when the rest of the data seems to be showing up.
The map is here: http://clairemiller.net/blaenaupop.html
The code I'm using to display that is:
<!DOCTYPE html>
<html>
<head>
<style>
#map_canvas { width: 335px; height: 400px; float: left}
#map_canvas2 { width: 335px; height: 400px; }
#image {float: bottom}
body { margin: 0px}
p {color: white; font-family: arial; font-size: 12px; margin: 0px; position: relative; left: 4px; top: 3px }
#left { width: 335px; height: 20px; float: left; background-color: #007A8F}
#right { width: 335px; height: 20px; float: left; background-color: #005F70}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"> </script>
<script type="text/javascript">
var map;
var layer;
var layer2;
var secondMapMove = false;
var secondMapBounds = false;
function initialize() {
map = new google.maps.Map(document.getElementById('map_canvas'), {
center: new google.maps.LatLng(51.787578, -3.204393),
zoom: 12,
mapTypeId: 'roadmap'
});
var layer = new google.maps.FusionTablesLayer({
center: new google.maps.LatLng(51.5021181, -3.17909),
query: {
select: 'geometry',
from: '1F3SbppvMyF-3lcT5zrYS8S1X8JD1G2-0aQkWLPw',
}
});
layer.setMap(map);
map2 = new google.maps.Map(document.getElementById('map_canvas2'), {
zoom: 12,
mapTypeId: 'roadmap'
});
var layer2 = new google.maps.FusionTablesLayer({
center: new google.maps.LatLng(53.13359,-1.955566),
query: {
select: 'geometry',
from: '1Hf9Z80JTCiq-zWwhhSPrbifO7q9dvA_DP_BN8IY',
}
});
layer2.setMap(map2);
google.maps.event.addListener(map,'zoom_changed',function(){
if(secondMapBounds!=true) {
var tmpZoom = map.getZoom();
map2.setZoom(tmpZoom);
} else {
secondMapBounds = false;
}
});
google.maps.event.addListener(map2,'zoom_changed',function(){
secondMapBounds = true;
var tmpZoom1 = map2.getZoom();
map.setZoom(tmpZoom1);
});
google.maps.event.addListener(map,'bounds_changed',function(){
if(secondMapMove!=true) {
var tmpBounds = map.getCenter();
map2.setCenter(tmpBounds);
} else {
secondMapMove=false;
}
});
google.maps.event.addListener(map2,'bounds_changed',function(){
secondMapMove = true
var tmpBounds2 = map2.getCenter();
map.setCenter(tmpBounds2);
});
}
</script>
</head>
<body onload="initialize();">
<div class="mapMap" id="map_canvas"></div>
<div class="mapMap" id="map_canvas2"></div>
</body>
</html>
The IDs for the two tables are in there, the infowindow appears to be showing up fine on them.
I'm wondering what I've missed that is causing the infowindows to show up blank.
It doesn't show blank, it shows white.
The contents of the infoWindows are inside <p/>-elements, the background of the infoWindows is white, and this is your CSS:
p {color: white;/*......*/}
change the color
.googft-info-window p{color:#000;}
When I use Google Maps as an anonymous user, when I find a company that I'm building a website for, Google shows me some kind of a default street view photo for that place. It's quite nice and I would like to have this photo appear also in my custom InfoWindow that I'm preparing using API3. Is there a method for that or should I sniff and use its source path?
You can embed the street view panorama like this, or embed a screen capture image in the infowindow contents (<img src="...">) Also you may set the marker visible: false
http://jsfiddle.net/sST8z/
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body { margin: 0; padding: 0; height: 100% }
#map_canvas { margin: 0; padding: 0; width: 500px; height: 300px }
#street { margin: 0; padding: 0; width: 150px; height: 150px }
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map;
var mapOptions = { center: new google.maps.LatLng(0.0, 0.0), zoom: 2,
mapTypeId: google.maps.MapTypeId.ROADMAP };
function initialize() {
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
street = new google.maps.StreetViewPanorama(document.getElementById("street"), {
position: new google.maps.LatLng(40.72982797782924, -73.98622512817383),
zoomControl: false,
enableCloseButton: false,
addressControl: false,
panControl: false,
linksControl: false
});
var infow = new google.maps.InfoWindow({ content: document.getElementById("street") });
var myLatLng = new google.maps.LatLng(40.72982797782924, -73.98622512817383);
var marker = new google.maps.Marker({ position: myLatLng, map: map, visible: true });
infow.open(map, marker);
map.setCenter(myLatLng);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="street"></div>
<div id="map_canvas"></div>
</body>
</html>