Is it possible to create a customisable center point for a static Google Maps API?

Question

I am trying to write the code that takes two user inputs (latitude and longitude values) and uses a Google Maps API to load up the corresponding Google Map. Is there any way to create a static Google Map that alters depending on the values entered? I have tried using the javascript API however I need the map to be brought up in an image format.

(code from comment):

function pos() {
  alert("Your chosen coordinates are: (" + document.getElementById("lat").value + ", " + document.getElementById("long").value + ")");
  var lat = parseFloat(document.getElementById("lat").value);
  var long = parseFloat(document.getElementById("long").value);
  x = document.getElementById("button2") x.style.visibility = "visible";
  var mapProp = {
    center: new google.maps.LatLng(lat, long),
    zoom: 20,
    mapTypeId: google.maps.MapTypeId.SATELLITE
  };
  var map = new google.maps.Map(document.getElementById("googleMap"), mapProp‌​);
}

Answer 1

When creating the map, pass in a center object like so

var map = new google.maps.Map(document.getElementById('map'), {
    center: {
        lat: -34,
        lng: 151
    }
}

Or set it later like so

map.setCenter({lat: -34, lng: 151}); 

Answer 2

Related questions:

• Google Maps Static Map API path from KML
• GMap Drawing tools to image jpeg [static map URL]

To make a static map from dynamic input, use javascript to create the URL:

function createStaticMap(map) {
  var staticMap = "https://maps.googleapis.com/maps/api/staticmap?size=512x512";
  staticMap += "&maptype="+map.getMapTypeId();
  staticMap += "&center="+map.getCenter().toUrlValue(6);
  staticMap += "&zoom="+map.getZoom();
  document.getElementById('staticMap').innerHTML = staticMap;
  document.getElementById('imageholder').innerHTML = "<img src='" + staticMap + "' alt='static map' / > ";
  document.getElementById('urllen').innerHTML = "URL length =" + staticMap.length + " characters";
}

proof of concept fiddle

static map:

Google Maps Javascript API v3 map:

code snippet:

 #googleMap { height: 500px; width: 500px; padding: 0px; margin: 0px; } 

 static map: <div id="imageholder"></div> static map URL: <div id="staticMap"></div> <input id="lat" value="43" /> <input id="long" value="-72" /> Google Maps Javascript API v3 map: <div id="googleMap"></div> <input id="button2" type="button" value="show map" /> <script> function pos() { var lat = parseFloat(document.getElementById("lat").value); var long = parseFloat(document.getElementById("long").value); var mapProp = { center: new google.maps.LatLng(lat, long), zoom: 20, mapTypeId: google.maps.MapTypeId.SATELLITE }; var map = new google.maps.Map(document.getElementById("googleMap"), mapProp); createStaticMap(map); google.maps.event.addDomListener(document.getElementById('button2'), 'click', function() { var lat = parseFloat(document.getElementById("lat").value); var long = parseFloat(document.getElementById("long").value); map.setCenter(new google.maps.LatLng(lat, long)); createStaticMap(map); }); } function createStaticMap(map) { var staticMap = "https://maps.googleapis.com/maps/api/staticmap?size=500x500"; staticMap += "&amp;maptype=" + map.getMapTypeId(); staticMap += "&amp;center=" + map.getCenter().toUrlValue(6); staticMap += "&amp;zoom=" + map.getZoom(); document.getElementById('staticMap').innerHTML = staticMap; document.getElementById('imageholder').innerHTML = "<img src='" + staticMap + "' alt='static map' / > "; } </script> <script src="https://maps.googleapis.com/maps/api/js?callback=pos"></script>