Google Maps API - Show Pin At Position

From NoskeWiki
Jump to: navigation, search
Photo thumbnail and it's map location".

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 -->


Links