Google Maps API - Show Pin At Position
Jump to navigation
Jump to search
About
NOTE: This page is a daughter page of: Google Maps API
Here's a piece of code I thought worth sharing. It allows you to feed in a lat/lng, and displays a pin on the map.... plus a thumbnail above it, with some nice CSS. It's also been configured so that if either the location or thumbnail is missing, it will let you know.
Showing a Thumbnail And Map of a Place
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Map Marker and Image Thumbnail Test</title>
<style>
#image-summary {
border: 1px solid #aaa;
background-color: #f9f9f9;
width: 300px;
margin: 5px;
padding: 5px;
visibility: hidden; /* Starts invisible. */
float: right;
}
#thb-area {
display: none; /* Starts hidden. */
}
#map-area {
display: none; /* Starts hidden. */
}
#map-canvas {
width: 300px;
height: 150px;
margin: 0px;
margin: 5px 0px 0px 0px;
}
#img-thumbnail {
max-width: 300px;
max-height: 200px;
padding: 0px;
display: block;
margin-left: auto; /* Center thumbnail */
margin-right: auto; /* Center thumbnail */
}
.small-link
{
display: inline;
float: right;
font-size: 80%;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=false"></script>
<script>
/**
* Displays a thumbnail image, by turning on correct visibilities, then sets the src to display
* in the thumbnail image ('img-thumbnail') image element and sets the thumbnail link ('thb-link')
* to the full res version.
* @param {string} thbUrl Thumbnail URL to display.
* @param {string} fullResUrl Full resolution URL to link to.
*/
function setThumbnail(thbUrl, fullResUrl) {
var imgThumbnail = document.getElementById('img-thumbnail');
var thbLink = document.getElementById('thb-link');
var thbArea = document.getElementById('thb-area');
var noThbArea = document.getElementById('no-thb-area');
var imageSummary = document.getElementById('image-summary');
if (!imgThumbnail || !thbLink || !thbArea || !imageSummary) {
console.error('ERROR: Expected img elements not found.');
return;
}
if (thbArea.style.visibility == 'visible') {
console.log('Thumbnail already set.');
return;
}
// Set properties:
imgThumbnail.src = thbUrl;
imgThumbnail.title = fullResUrl;
imgThumbnail.alt = fullResUrl;
thbLink.href = fullResUrl;
thbLink.title = fullResUrl;
thbArea.style.display = 'block';
noThbArea.style.display = 'none';
imageSummary.style.visibility = 'visible';
}
/**
* Display a location map, with the given location highlighted and link to google maps at this
* location.
* @param {float} lat Latitude value.
* @param {float} lng Longitude value.
*/
function setMapLocation(lat, lng) {
var mapCanvas = document.getElementById('map-canvas');
var mapLink = document.getElementById('map-link');
var mapArea = document.getElementById('map-area');
var noMapArea = document.getElementById('no-map-area');
var imageSummary = document.getElementById('image-summary');
if (!mapCanvas || !mapLink || !mapArea || !imageSummary) {
console.error('ERROR: Expected img elements not found.');
return;
}
if (mapArea.style.visibility == 'visible') {
console.log('Map location already set.');
return;
}
// Setup map with correct position and zoom:
var myLatlng = new google.maps.LatLng(lat, lng);
var mapOptions = {
zoom: 11,
center: myLatlng
}
var map = new google.maps.Map(mapCanvas, mapOptions);
// Add marker to map:
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: lat.toFixed(4) + ',' + lng.toFixed(4)
});
// Set properties:
var mapUrl = "https://www.google.com/maps/place/" + lat + "+" + lng +
"/@" + lat + "," + lng + ",15z/";
mapLink.href = mapUrl;
mapLink.title = lat.toFixed(4) + ',' + lng.toFixed(4);
mapArea.style.display = 'block';
noMapArea.style.display = 'none';
imageSummary.style.visibility = 'visible';
}
</script>
</head>
<body>
<div id="image-summary">
<div id="no-thb-area" title="BLAH BLAH">
Can't display thumbnail.
</div>
<div id="thb-area">
Thumbnail:
<a id="thb-link" class="small-link" href="">(open full res)</a>
<img id="img-thumbnail" align="middle" src="">
</div>
<hr>
<div id="no-map-area">
Can't display location.
</div>
<div id="map-area">
Location:
<a id="map-link" class="small-link">(open in maps)</a>
<div id="map-canvas"></div>
</div>
</div>
<script>
setThumbnail("https://lh3.ggpht.com/-Q0e0L1gdhV0/USLG9zPJW7I/AAAAAAAAEkA/zguEiIZuKpE/w400-h200/",
"https://lh3.ggpht.com/-Q0e0L1gdhV0/USLG9zPJW7I/AAAAAAAAEkA/zguEiIZuKpE/s0/");
setMapLocation(37.397725, -122.099980);
</script>
</body>
</html>
<!-- ACKNOWLEDGEMENTS:
Code was based on: https://developers.google.com/maps/documentation/javascript/examples/map-simple -->
