Does anyone know how make the default Google map interface display long and lat coordinates in an info window when the user clicks on the map?
Header code:
<script src="http://maps.google.com/maps?file=api&v=2&sensor=true&key=..." type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(13.175771, -59.556885), 10);
map.setUIToDefault();
}
}
</script>
Body code:
<div id="map" style="width: 640px; height: 300px"></div>
google.maps.event.addListener(map, 'click', function(event) {
new google.maps.InfoWindow({
position: event.latLng,
content: event.latLng.toString()
}).open(map);
});
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'm using the following basic code as a framework to embed a Google Map:
<!DOCTYPE html>
<html>
<head>
<style>
#map {
width: 700px;
height: 700px;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
var mapCanvas = document.getElementById('map');
var mapOptions = {
center: new google.maps.LatLng(41.2048114,8.0734625),
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(mapCanvas, mapOptions)
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map"></div>
Adding a Google Map to your website
</body>
</html>
The map however, is not centered on the required country in the manner the iframe/url embed method does:
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6147641.518761753!2d8.073462507072607!3d41.204811445527874!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x12d4fe82448dd203%3A0xe22cf55c24635e6f!2sItaly!5e0!3m2!1sen!2sie!4v1445183005624" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
Note: I've checked other questions but the code seems outmoded or at least disparate to the official convention I'm trying to follow.
How can I center the map using/modifying the first code block (I don't want to deviated drastically from its method).
Your simplest option is to make both maps the same size and adjust the center and zoom of the Google Maps Javascript API v3 map until it matches your embedded map.
fiddle
code snippet:
function initialize() {
var mapCanvas = document.getElementById('map');
var mapOptions = {
center: new google.maps.LatLng(41.28718658156576, 12.600134851639705),
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(mapCanvas, mapOptions);
google.maps.event.addListener(map,'center_changed',function() {
document.getElementById('info').innerHTML = map.getCenter()+":"+map.getZoom();
});
}
google.maps.event.addDomListener(window, 'load', initialize);
#map {
width: 700px;
height: 700px;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>
<div id="info"></div>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6147641.518761753!2d8.073462507072607!3d41.204811445527874!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x12d4fe82448dd203%3A0xe22cf55c24635e6f!2sItaly!5e0!3m2!1sen!2sie!4v1445183005624" width="700" height="700" frameborder="0" style="border:0" allowfullscreen></iframe>
Another option would be to use the Google Maps Javascript API v2 Geocoder to get the bounds of Italy. That doesn't quite fit at zoom level 6 (so zooming to the bounds is not zoomed in close enough). To address that wait until the map has set its bounds, then increment the zoom level by one.
fiddle
code snippet:
function initialize() {
var mapCanvas = document.getElementById('map');
var map = new google.maps.Map(mapCanvas);
var geocoder = new google.maps.Geocoder();
geocoder.geocode({
'address': "Italy"
}, function(results, status) {
if (status === google.maps.GeocoderStatus.OK) {
map.fitBounds(results[0].geometry.bounds);
google.maps.event.addListenerOnce(map, 'bounds_changed', function() {
map.setZoom(map.getZoom() + 1);
});
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
#map {
width: 700px;
height: 700px;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6147641.518761753!2d8.073462507072607!3d41.204811445527874!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x12d4fe82448dd203%3A0xe22cf55c24635e6f!2sItaly!5e0!3m2!1sen!2sie!4v1445183005624"
width="700" height="700" frameborder="0" style="border:0" allowfullscreen></iframe>
While geocodezip's answer is correct, you might want play around in some browsers and get the user location as the center. How and where you want to center is usually based on your use case. However, it works good in Firefox and Chrome but Safari seems to need tuning in settings to allow tracking.
jsfiddle
And here is the code to center using the user's location:
<!DOCTYPE html>
<html>
<head>
<style>
#map {
width: 700px;
height: 700px;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
}
}
function showPosition(pos) {
var mapCanvas = document.getElementById('map');
var mapOptions = {
center: new google.maps.LatLng(pos.coords.latitude,pos.coords.longitude),
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(mapCanvas, mapOptions);
}
google.maps.event.addDomListener(window, 'load', getLocation);
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
I have a simple google map v3 with one marker and infowindow attached to it.
if I click the marker, the infowindow shows and map pans automatically to fit the infowindow in the view, however if I try to trigger a click to open the infowindow when the page loads, the infowindow opens but panning does not occur.
Triggering is done like so:
google.maps.event.trigger(marker, 'click');
If I move above code into a function and call it with setTimeout 500, then the panning happens as well.
I dug around in API, but could not find a function to cause auto panning on demand. is there a way without using a timeout? Why does the timeout help?
Thanks
Here's the example that Does not pan:
<!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 { width: 400px; height: 320px }
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var myLatlng = new google.maps.LatLng(42.6620233,-78.4250679);
var mapOptions = {
center: myLatlng,
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
var contentString = '<div style="width: 200px; height: 100px;">Testing</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Hello World!"
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
google.maps.event.trigger(marker, 'click');
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"/>
</body>
</html>
Here's the one that does pan but only with a timeout:
<!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 { width: 400px; height: 320px }
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
var map;
var marker;
function initialize() {
var myLatlng = new google.maps.LatLng(42.6620233,-72.4250679);
var mapOptions = {
center: myLatlng,
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
var contentString = '<div style="width: 200px; height: 100px;">Testing</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Hello World!"
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
setTimeout('pop()', 500);
//google.maps.event.trigger(marker, 'click');
//infowindow.open(map,marker);
//map.pan();
}
google.maps.event.addDomListener(window, 'load', initialize);
function pop() {
google.maps.event.trigger(marker, 'click');
}
//setTimeout('pop()', 500);
</script>
</head>
<body>
<div id="map-canvas"/>
</body>
</html>
The initializing of the map is not a synchronous process, when you've created the Map-instance it takes some time until all properties of the map are set(so maybe some properties that are needed to determine the position where to pan the map)
When you use a timeout and it works the needed properties are set at this time.
Instead a timeout I would suggest to call the function when the tiles have been loaded, you can be sure that the initializing of the map has been finished at this time:
google.maps.event.addListenerOnce(map, 'tilesloaded', pop);
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/
How do you call a markers' infowindow to open when the map loads. For some reason the Google documentation only shows how to respond to a click action. I'm not very good with JavaScript so any help would be appreciated. Thanks!
this is my current code, but for some reason, no map appears. But there is no error to help me pinpoint the problem...
<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?sensor=true">
</script>
<script type="text/javascript">
function initialize() {
var map = new GMap2(document.getElementById("map"));
var point = new GLatLng(53.3407791, -6.2596385);
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(point, 16);
// Set up three markers with info windows
var html = 'South Anne Street,<br />Dublin 2, Ireland';
var marker = new GMarker(point);
map.addOverlay(marker);
marker.openInfoWindowHtml(html); // This opens the info window automatically
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
});
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>