I use an example from Google's documentation
When I add my own photograph, then this works well.
But when I change the coordinates, then the photograph don't display anymore.
I get the coordinates from adding a image (image overlay) in Google Earth.
I'm don't understand what I'm doing wrong.
code:
<!DOCTYPE html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Ground Overlays</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&signed_in=true"></script>
<script>
// This example uses a GroundOverlay to place an image on the map
// showing an antique map of Newark, NJ.
var historicalOverlay;
function initialize() {
var newark = new google.maps.LatLng(58.8110, 8.526);
var imageBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(58.989835, 9.050201),
new google.maps.LatLng(58.612911, 7.917444));
var mapOptions = {
zoom: 10,
center: newark
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
historicalOverlay = new google.maps.GroundOverlay(
'http://xxxxxxxxx/test/images/map/kart.JPG',
imageBounds);
historicalOverlay.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
the expected arguments for LatLngBounds are
SouthWest
NorthEast
...but you've provided:
NorthEast
SouthWest
switch the arguments and you'll see the image
// This example uses a GroundOverlay to place an image on the map
// showing an antique map of Newark, NJ.
var historicalOverlay;
function initialize() {
var newark = new google.maps.LatLng(58.8110, 8.526);
var imageBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(58.612911, 7.917444),
new google.maps.LatLng(58.989835, 9.050201)
);
var mapOptions = {
zoom: 10,
center: newark
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
map.fitBounds(imageBounds);
historicalOverlay = new google.maps.GroundOverlay(
'http://i.stack.imgur.com/mA4e2.jpg?s=256&g=1',
imageBounds);
historicalOverlay.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
<script src="http://maps.googleapis.com/maps/api/js?v=3"></script>
<div id="map-canvas"></div>
Related
I have been using the Google Developers Tutorial on how to add a map to my website:
https://developers.google.com/maps/tutorials/fundamentals/adding-a-google-map#the_finished_code
I cannot seem to find a way to add a pin to the map, I have used the "centre" function so that the map is centred on the lat and long of the pin, but the pin itself is not visible.
Any way to create a pin at that lat and long?
Just need to instantiate a marker Object and place it at the coordinates:
<!DOCTYPE html>
<html>
<head>
<style>
#map {
width: 500px;
height: 400px;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
var mapCanvas = document.getElementById('map');
var myLatLng = {lat: 44.5403, lng: -78.5463};
var mapOptions = {
center: new google.maps.LatLng(myLatLng),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(mapCanvas, mapOptions)
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
Fiddle
Try the following:
replace center with location
before:
center: new google.maps.LatLng(myLatLng),
after:
location: new google.maps.LatLng(myLatLng),
That should do the trick (should add the Pin automatically).
I need do embed a kml google earth map in my webpage.
I followed this instructions, but the link to get the code to embed doesn't seem to be activated here.
I also tryed the followning code, but it shows a simple map without the informatons in the kml file
<head>
<title></title>
<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 }
#google-map { height: 100% }
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=MY-KEY&sensor=false">
</script>
<script>
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(42.753633, 13.952404),
zoom: 10,
mapTypeId: google.maps.MapTypeId.SATELLITE,
scrollwheel: false
}
var map = new google.maps.Map(document.getElementById('google-map'), mapOptions);
var ctaLayer = new google.maps.KmlLayer({
url: 'poligono1.kml'
});
ctaLayer.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body onload="initialize()">
<div id="google-map" class="google-map"></div>
</body>
i put the kml file in the same folder of the webpage.
Thanks in advance for helping me!!!
i tried the scaisEdge code, and it works fine.
but in iis were missing the mime type, then i added the mime type, and now it works fine... thanks geocodezip!!!
I think this sample from google developer could be useful
<!DOCTYPE html>
<html>
<head>
<style>
#map-canvas {
width: 500px;
height: 400px;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js"></script>
</head>
<body>
<div id="map-canvas"></div>
<script>
/**
* #fileoverview Sample showing capturing a KML file click
* and displaying the contents in a side panel instead of
* an InfoWindow
*/
var map;
var src = 'https://developers.google.com/maps/tutorials/kml/westcampus.kml';
/**
* Initializes the map and calls the function that creates polylines.
*/
function initialize() {
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(-19.257753, 146.823688),
zoom: 2,
mapTypeId: google.maps.MapTypeId.TERRAIN
});
loadKmlLayer(src, map);
}
/**
* Adds a KMLLayer based on the URL passed. Clicking on a marker
* results in the balloon content being loaded into the right-hand div.
* #param {string} src A URL for a KML file.
*/
function loadKmlLayer(src, map) {
var kmlLayer = new google.maps.KmlLayer(src, {
suppressInfoWindows: true,
preserveViewport: false,
map: map
});
google.maps.event.addListener(kmlLayer, 'click', function(event) {
var content = event.featureData.infoWindowHtml;
var testimonial = document.getElementById('capture');
testimonial.innerHTML = content;
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</body>
</html>
Im building a site for a friend of mine and im having a hell of time trying to get the map marker to show up, I gotta admit im not much for java coding but Ive done my share of it. Im a designer and 3d motion graphics artist.
Im currently working on this template in Dreamweaver CC and I chose it cause thats how Ive been constructing sites for years.
So he gave me a template that he wanted me to use 427_timeline (its A freebie).
The modified version of this template can be seen here http://johnnybobs3ddesignz.com/
My first time but works the same pretty much. Heres My code, if someone could help me Id appreciate that so much, it would be mighty groovy dude ;)
<script>
function initialize()
{
var mapOptions = {
center: new google.maps.LatLng(34.073809, -118.323371),
zoom: 15,
scrollwheel: false,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("templatemo-map")
,mapOptions);
var location = new google.maps.LatLng(34.073809, -118.323371);
var contentString = '<h2>Runyon Investment & Realty</p>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: mylatLng,
title: 'Runyon Investment & Realty',
visible: true
});
marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
google.maps.event.addDomListener(window, 'resize', function()
{
map.setCenter(center);
});
</script>
I get two javascript errors with your code as is:
Uncaught ReferenceError: mylatLng is not defined
Uncaught ReferenceError: map is not defined
Because mylatLng is not defined in your code (you define location) and map is local to your initialize function
Working code snippet:
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(34.073809, -118.323371),
zoom: 15,
scrollwheel: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("templatemo-map"), mapOptions);
var location = new google.maps.LatLng(34.073809, -118.323371);
var contentString = '<h2>Runyon Investment & Realty</p>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: location,
title: 'Runyon Investment & Realty',
visible: true
});
marker.setMap(map);
google.maps.event.addDomListener(window, 'resize', function() {
map.setCenter(center);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#templatemo-map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="templatemo-map" style="border: 2px solid #3872ac;"></div>
Just use this link
https://developers.google.com/maps/documentation/javascript/
to get desired informations.
for example use the following snippet.
They use the
map - option
in the init of the marker. Just try that in your code too.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Simple markers</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 myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
zoom: 4,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World!'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
I have one code that shows elevation and another which displays weather information. Is there a way to merge the two codes together so I have one map that has both features? I am using notepad to work on this.
Code 1:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Elevation 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&sensor=false"></script>
<script>
var weatherLayer = new google.maps.weather.WeatherLayer({
temperatureUnits: google.maps.weather.TemperatureUnit.CELSIUS
});
weatherLayer.setMap(map);
var cloudLayer = new google.maps.weather.CloudLayer();
cloudLayer.setMap(map);
}
var elevator;
var map;
var infowindow = new google.maps.InfoWindow();
var denali = new google.maps.LatLng(60.750000, -139.500000);
function initialize() {
var mapOptions = {
zoom: 8,
center: denali,
mapTypeId: 'terrain'
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
// Create an ElevationService
elevator = new google.maps.ElevationService();
// Add a listener for the click event and call getElevation on that location
google.maps.event.addListener(map, 'click', getElevation);
}
function getElevation(event) {
var locations = [];
// Retrieve the clicked location and push it on the array
var clickedLocation = event.latLng;
locations.push(clickedLocation);
// Create a LocationElevationRequest object using the array's one value
var positionalRequest = {
'locations': locations
}
// Initiate the location request
elevator.getElevationForLocations(positionalRequest, function(results, status) {
if (status == google.maps.ElevationStatus.OK) {
// Retrieve the first result
if (results[0]) {
// Open an info window indicating the elevation at the clicked position
infowindow.setContent('The elevation at this point <br>is ' + results[0].elevation + ' meters.');
infowindow.setPosition(clickedLocation);
infowindow.open(map);
} else {
alert('No results found');
}
} else {
alert('Elevation service failed due to: ' + status);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
AND Code 2:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Weather layer</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&sensor=false&libraries=weather"></script>
<script>
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(60.750000, -139.500000),
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var weatherLayer = new google.maps.weather.WeatherLayer({
temperatureUnits: google.maps.weather.TemperatureUnit.CELSIUS
});
weatherLayer.setMap(map);
var cloudLayer = new google.maps.weather.CloudLayer();
cloudLayer.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
You would probably want to put the code into a seperate .js file, and link it in. That way, the code would be right next to each other, and hence you could get both effects, which other wise would not work. You are already linking a script file from google - all you would need is to put the code of yours into a .js file, and link it in the same way
I am trying to get a marker to show on the google map for a website I am doing. Without the marker code the map loads fine and shows the correct location (with no marker), when I add the marker code the map no longer loads. Clearly I am missing something simple but I am not too familiar with Jquery.
<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=AIzaSyBWJYTBt3bKUIsQKKsQPSnR1IHNdkAmBQs&sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(53.154662, -1.208357),
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
}
var marker = new google.maps.Marker({
position:(53.154662, -1.208357),
map: map-canvas,
title:"Hello World!"
});
google.maps.event.addDomListener(window, 'load', initialize);
</script>
Thanks for any assistance.
The map-property is expected to be a google.maps.Map-instance and the position-property has to be a google.maps.LatLng:
Furthermore you must create the marker when the map already has been created and in a scope where the maps-instance is accessible, e.g. at the end of initialize().
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(53.154662, -1.208357),
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
var marker = new google.maps.Marker({
position:new google.maps.LatLng(53.154662, -1.208357),
map: map,
title:"Hello World!"
});
}