Generate Google Maps with dynamic values of latitude and longitude in javaScript

Question

I am gone through many tutorials and the Google Developer site, but everywhere the way to create Google Maps with a particular latitude/longitude are given.e.g.

function initialize() {
    var mapOptions = {
        center: {
            lat: -34.397,
            lng: 150.644
        },
        zoom: 8
    };
    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}

google.maps.event.addDomListener(window, 'load', initialize);

Does anyone know the JavaScript code to create the map based on dynamic values lat/long? I mean not specific values like -34.397 etc. To the function initialize I will pass the latitude and longitude arguments and generate the map. Can anyone please tell me how to do it?

Answer 1

If you're going to pass in values for lat/lng as arguments for the initialize function couldn't you do:

function initialize(lat, lng) {
    var mapOptions = {
      center: { lat: lat, lng: lng},
      zoom: 8
    };
    var map = new google.maps.Map(document.getElementById('map-canvas'),
        mapOptions);
  }
  google.maps.event.addDomListener(window, 'load', initialize.bind(null, <Lat>, <Lng>));

Answer 2

Pass the lat, lng to your function as parameters and call your function with the right values initialize(-34.397, 150.644)

function initialize(lat, lng) {

    var mapOptions = {
        zoom: 4,
        center: new google.maps.LatLng(lat, lng),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
}

google.maps.event.addDomListener(window, 'load', initialize(-34.397, 150.644));

Answer 3

try with this:

function initialize(lat, lng){
    return new wrapperGM(lat,lng).initialize;
}

function wrapperGM(lat, lng) {

    this.initialize=function() {

    var mapOptions = {
        center: {
            lat: lat,
            lng: lng
        },
        zoom: 8
    };
    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
}

google.maps.event.addDomListener(window, 'load', initialize(56, 8));

hope this helps.

regards

Answer 4

Use gmap4rails gem and in your controller

 def map
  @hash = Gmaps4rails.build_markers(@towns) do |town, marker|
    marker.lat town.master_geo_town.latitude
    marker.lng town.master_geo_town.longitude
    marker.infowindow render_to_string(:partial => "infomap",    :locals=> { :town => town.master_geo_town})
 end

and in your view

<div id="multi_markers" style='width:100%;height: 400px;'>  </div>
<script>
handler = Gmaps.build('Google');
        handler.buildMap({ internal: {id: 'multi_markers'}}, function(){
          var json_array = <%=raw @hash.to_json %>;

          var markers = handler.addMarkers(json_array);

          _.each(json_array, function(json, index){
            json.marker = markers[index];
          });
          createSidebar(json_array);
          handler.bounds.extendWith(markers);
          handler.fitMapToBounds();
        });
      });
</script>