I'm playing around with google map apis following the google maps tutorial https://developers.google.com/maps/tutorials/fundamentals/adding-a-google-map
but with the following code the map doesn't show in my html code example.
Any suggestions?
Regards
<html>
<head>
<style>
#map_canvas {
width: 500px;
height: 400px;
}
</style>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
function initialize() {
var map_canvas = document.getElementById('map_canvas');
var map_options = {
center: new google.maps.LatLng(44.5403, -78.5463),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(map_canvas, map_options)
}
google.maps.event.addDomListener(window, ‘load’, initialize);
</script>
</head>
<body>
<div id="map_canvas"></div>
</body>
</html>
This line:
google.maps.event.addDomListener(window, ‘load’, initialize);
Contains invalid characters. This should work:
google.maps.event.addDomListener(window, 'load', initialize);
Related
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 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>
Hello i m using Google API v 3.0 for showing street view,but street view is not showing for a prticular point but maps.google.com is showing street view for this location. where i m wrong.
My code is below :-
<!DOCTYPE html>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<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>
var latitude=null;
var longitude=null;
var fenway;
var map;
var panoramaOptions;
function initialize() {
var value = '950 COUNTRY CLUB DRIVE, MORAGA 94556 ';
alert("value"+value);
var infoWindow = new google.maps.InfoWindow;
$.ajax({
url:"http://maps.googleapis.com/maps/api/geocode/json?address="+value+"&sensor=false",
type: "POST",
success:function(res){
latitude=res.results[0].geometry.location.lat;
alert("latitude"+latitude);
longitude=res.results[0].geometry.location.lng;
alert("longitude"+longitude);
}
});
fenway = new google.maps.LatLng(latitude,longitude);
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>
For the street view you can refer to this API https://developers.google.com/maps/documentation/streetview/
Here you can change FOV, pitch heading. Hope this helps
This is the link to my fusion table of latitude and longitude points: https://www.google.com/fusiontables/DataSource?docid=15fqwXO49M-kIOrHVSfE8J4yVsfuD4ySEkZ28494#rows:id=1
I am trying to create a heat map using latitude and longitude points and for some reason only 1 point is displayed.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Flickr Data Visualization Map</title>
<style>
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
#map_canvas {
width: 100%;
height: 100%;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var map;
function initialize() {
map = new google.maps.Map(document.getElementById('map_canvas'), {
center: new google.maps.LatLng(37.09024, -95.712891),
zoom: 3,
maxZoom: 20,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var layer = new google.maps.FusionTablesLayer({
query: {
select: 'Location',
from: '15fqwXO49M-kIOrHVSfE8J4yVsfuD4ySEkZ28494'
},
heatmap: {
enabled: true
}
});
layer.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map_canvas"></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);