Gmaps4Rails:Setting Map Width and Height

Gmaps4rails : Setting map width and height

I should have given further details about this.

I'll make an installation rake task to copy css and javascript in the Rails app.

Well, for now, simply override this in your css (I assume you didn't change the map id).

#gmaps4rails_map {
  width: 800px;
  height: 400px;
}

If you want it to work, beware to include your css after the yield(:head)

<%= yield :head %>
<%= stylesheet_link_tag "your css" %>

set height and width of infowindow gmaps4rails in controller

u need to set these things on the css. THe fact is that the partial that u load have some HTML codes. So you implement some css class to it and then customize this class to appear as you want the box to appear.

Youll find gmaps css on your stylesheets folder.

You cant, or at least is not desirable that you set things from view in controller.

anyone know how to change the size of a Google-Maps-for-Rails map

It is very easy to implement googlemaps even without using a plugin.
basically all you need to do is include the gmaps javascript in the header:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

and an init function:

function initGmaps() {
var latlng = new google.maps.LatLng(48.839234,12.969335); // to be replaced with desired latitide / langitude
var myOptions = {
  zoom: 16,
  mapTypeId: google.maps.MapTypeId.ROADMAP,
  center: latlng
};
var myMap = new google.maps.Map(document.getElementById("gmaps"), myOptions);

var marker = new google.maps.Marker({
    position: latlng, 
    map: myMap, 
    title:"marker title"
});     

}

and you are done.

width and height would be specified by the css of the chosen div, in this example #gmaps.

Gmaps4rails location set

using handler to initialize map i do something like

handler.map.centerOn({ lat: 5.574076, lng: -75.5926227 })

here you can find more info
https://github.com/apneadiving/Google-Maps-for-Rails/wiki/Js-Methods

function intializeMap(){  handler = Gmaps.build('Google');  handler.buildMap({ provider: {}, internal: {id: 'map'}}, function(){    markers = handler.addMarkers("the DATA here");    handler.bounds.extendWith(markers);    handler.map.centerOn({lat: 5.574076, lng: -75.5926227});    handler.fitMapToBounds();  });}

Rails 5, Gmaps4Rails - setup

Here is the smallest Rails app I could get running with Google Maps.

Ruby 2.3.1, Rails 5.0.0.1, no extra gem needed.

rails new gmaps

uncomment

gem 'therubyracer', platforms: :ruby

in Gemfile

bundle install

rails generate resource marker name:string latitude:decimal longitude:decimal

rake db:migrate

app/controllers/markers_controller.rb:

class MarkersController < ApplicationController
  def index
    @markers = Marker.all
  end
end

app/views/markers/index.html.erb:

<h3>My Google Maps Demo</h3>
<div id="map"></div>

<%= javascript_tag do %>
  var markers = <%= raw @markers.to_json %>;
<% end %>

<script async defer
src="https://maps.googleapis.com/maps/api/js?key=<%= ENV['GOOGLE_MAPS_API_KEY'] %>&callback=initMap">
</script>

app/assets/stylesheets/markers.scss:

#map {
  height: 400px;
  width: 100%;
}

app/assets/javascripts/markers.js:

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4
  });
  var bounds = new google.maps.LatLngBounds();

  var n = markers.length;
  for (var i = 0; i < n; i++) {
    var marker = new google.maps.Marker({
      position: {lat: parseFloat(markers[i].latitude), lng: parseFloat(markers[i].longitude)},
      title: markers[i].name,
      map: map
    });
    bounds.extend(marker.position);
  }

  map.fitBounds(bounds);
}

Add some Markers in rails c :

Marker.create(:name => 'Sydney', :latitude => -33.87, :longitude => 151.17)
Marker.create(:name => 'Uluru', :latitude => -25.363, :longitude => 131.044)

Add your API KEY to the environment in bash :

export GOOGLE_MAPS_API_KEY="AIza.............................."

rails s

Done!

I used this answer and this Gmaps documentation.

You probably should check that no malicious code is transmitted to javascript, e.g. via Marker#name.

I am having a difficult time putting my sidebar next to my google maps - gmaps4rails

I added my comments to the code.

Working Responsive example:

#map_wrapper {  margin-left: 30%; /* should match sideBar width */  overflow: hidden; /* cut off any overflow */  height: 100%; /* fill up main div height */}
#sideBar {  width: 30%; /* adjust sidebar width as percentage of main div */  max-height: 100%; /* Never exceed main div height on small screens */  height: 400px;  position: absolute;  background: #131418;}
#sideBar span {  color: #999;}
.main {  max-width: 100vw; /* set max desired width for the ENTIRE set up */  height: 400px; /* set max desired height for the ENTIRE set up */  max-height: 100vh; /* make sure entire setup height never exceeds device height */}

<!-- initilize map --><script>  function initMap() {var map = new google.maps.Map(document.getElementById('map'), {center: {lat: 40.674,lng: -73.945},zoom: 12,})}</script>

<!--Your Map setup --><div class="main">
  <div id="sideBar" class="pre-scrollable">    <span>Sidebar content goes here...</span>  </div>

  <div id="map_wrapper">    <div id="map" style='width: 100%; height: 100%;'></div>  </div>
</div>

<!-- Load google API in the footer. --><script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDHu4QBgWONqtdOWVLTW5XZ51B1eOU6SWw&callback=initMap" async defer></script>

Gmaps4rails: How to set current user location on map by default in Rails 4

You could do as follows:

@hash = Gmaps4rails.build_markers(@properties) do |property, marker|
    marker.lat property.latitude
    marker.lng property.longitude
    marker.picture({
        "url"    => view_context.image_path("Orange-House-Icon.png"),
        "width"  => 50,
        "height" => 50
         })
    marker.infowindow  render_to_string( partial: 'layouts/mapinfo', locals: { property: property.id })
    marker.title "i'm the title"
end
if @hash.empty?
  @hash.push({
    lat: current_user.latitude,
    lng: current_user.longitude
  })
end

---

Btw, would be great to rename @hash to @array

---

Related Topics