geodesic map for a single source and multiple destination gmap4 rails - ruby-on-rails

I am new to gmaps4 and i have tried a lot but i was not able to find how to create a geodesic map, if i have single source and multiple destination using gmap4 rails.
So far i have tried this
Js
var locations = [
//Starting Point is "Home", and links to other locations"//
['Home', 37.774930, -122.419416],
['Location-1', 35.689487, 139.691706],
['Location-2', 48.856614, 2.352222],
['Location-3', -33.867487, 151.206990]
]
function initMap() {
var myLatLng = {
lat: 12.363,
lng: -131.044
};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: {
lat: 0,
lng: 0
}
});
var markers = [];
var bounds = new google.maps.LatLngBounds();
// Add the markers and infowindows to the map
for (var i = 0; i < locations.length; i++) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
title: locations[i][0],
map: map
})
markers.push(marker);
bounds.extend(marker.getPosition());
if (i > 0) {
var sitepath = new google.maps.Polyline({
path: [markers[0].getPosition(), marker.getPosition()],
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2,
map: map
});
}
}
map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, "load", initMap);
Html
<div id="map"></div>
but i am not able to understand how to do it using gmaps4 rails

Related

how to create costume marker icon rails google maps

i am developing google maps project so i want create costume marker icon here my code in javascript
`window.onload = function initmap() {
var markers = <%=raw #json.to_json %>;
var icon = {
url: '/home/amarnath/Project/myCarparking/app/assets/images/001-map.svg',
size: new google.maps.Size(15, 20),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(15/2, 20/2)
};
var infoWindow = new google.maps.InfoWindow({map: map});
var map = new google.maps.Map(document.getElementById("map_places"));
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var geolocpoint = new google.maps.LatLng(latitude, longitude);
var mapOptions = {
center: geolocpoint,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_places"), mapOptions);
var geomark = new google.maps.Marker({
position: geolocpoint,
map: map,
draggable: true,
animation: google.maps.Animation.DROP,
title: 'Your geolocation',
icon: 'http://labs.google.com/ridefinder/images/mm_20_green.png'
});
for (i = 0; i < markers.length; i++) {
var data = markers[i];
var myLatlng = new google.maps.LatLng(data.lat, data.lng);
marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: data.marker_title,
icon: '/home/amarnath/Project/myCarparking/app/assets/images/parking_full.png'
});
(function (marker, data) {
google.maps.event.addListener(marker, "click", function (e) {
infoWindow.setContent(data.infowindow);
infoWindow.open(map, marker);
});
})(marker, data);
}
});
}
}`
and i getting error like this
parking_full.png:1 GET http://localhost:3000/home/amarnath/Project/myCarparking/app/assets/images/parking_full.png 404 (Not Found)
Move your icon to /assets/images folder and add following code:
icon: "/assets/parking_full.png"

Heatmap.js w/ Leaflet Rendering Questions

I'm trying to set up a slightly altered version of Patrick Wied's heatmap.js demo w/ leaflet in this jsfiddle, but can't get the heatmap layer to render.
Any idea what's going on? Code below
Thanks in advance for any assistance.
Josh
HTML:
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js"></script>
<script src="https://unpkg.com/heatmap.js#2.0.5"></script>
<script src="https://unpkg.com/leaflet-heatmap#1.0.0"></script>
<div class="map-container">
<div id="map-here" style="width: 100%; height: 500px"></div>
</div>
<div class="heatmap" id="map-canvas">
</div>
<div class="map-controls">
JAVASCRIPT:
var map = L.map('map-here').setView([37.7829, -122.1312], 10);
var baseLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: '[[Attribution]]',
id: 'mapbox.streets'
}).addTo(map);
var refs = new L.LayerGroup()
refs.addTo(map)
map.refs = refs
var cfg = {
"radius": 2,
"maxOpacity": .8,
"scaleRadius": true,
"useLocalExtrema": true,
latField: 'lat',
lngField: 'lng',
valueField: 'count'
};
var heatmapLayer = new HeatmapOverlay(cfg);
var testData = {
max: 8,
data: [{
lat: 37.7829,
lng: -122.1312,
count: 3
}, {
lat: 37.7829,
lng: -122.1312,
count: 1
}, {
lat: 37.7821,
lng: -122.1312,
count: 1
}, {
lat: 37.783,
lng: -122.1312,
count: 1
}]
};
var map = new L.Map('map-canvas', {
center: new L.LatLng(37.7829, -122.1312),
zoom: 4,
layers: [refs, heatmapLayer]
});
heatmapLayer.setData(testData);
The problem is that you are trying to create two Leaflet maps in two divs (map-here and map-canvas) instead of adding overlays to one single map.
You only need to create one map with as many layers as you want.
//You don't need that map - commeted out
//var map = L.map('map-here').setView([37.7829,-122.1312], 10);
var baseLayer = L.tileLayer( 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: '[[Attribution]]',
id: 'mapbox.streets'
}
)
//.addTo(map);
var refs = new L.LayerGroup()
//refs.addTo(map)
//map.refs = refs
var cfg = {
"radius": 2,
"maxOpacity": .8,
"scaleRadius": true,
"useLocalExtrema": true,
latField: 'lat',
lngField: 'lng',
valueField: 'count'
};
var heatmapLayer = new HeatmapOverlay(cfg);
var testData = {
max: 8,
data: [{lat:37.7829,lng:-122.1312,count:3},{lat:37.7829,lng:-122.1312,count:1},{lat:37.7821,lng:-122.1312,count:1},{lat:37.783,lng:-122.1312,count:1}]
};
var map = new L.Map('map-here', {
center: new L.LatLng(37.7829,-122.1312),
zoom: 6,
layers: [baseLayer,refs, heatmapLayer]
});
heatmapLayer.setData(testData);
Please look at this fiddle for the visual: https://jsfiddle.net/vaillant/un1rogw2/
Also, what was the role of the refs layer? This layer seems to be empty. And you might want to change the options of your heatmap layer.
When you alter version of tutorials, it would be great to explain what you were hoping to achieve that was not in the initial tutorial.

Cannot read property 'offsetWidth' of null, google maps api js

I need to initialize load map on page click, but I have error. On my page can be more that one map, and thats why i do initialization on page click. This is my code. Please help me to solve this issue.
$('.button-expand').on('click', function() {
var self = $(this).text();
if (self === 'EXPAND') {
var location = #item.Latitude;
if (location != null) {
var latlng = new google.maps.LatLng(#item.Latitude, #item.Longitude);
var mapOptions = {
center: latlng,
zoom: 17,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var name = '#gmap-' + #item.Id;
var map = new google.maps.Map(document.getElementById(name), mapOptions);
// create a marker
var image = '../Content/Images/map_icon.png';
var marker = new google.maps.Marker({
position: latlng,
map: map,
icon: image
});
}
}
});
This is div:
#if (item.Latitude != null)
{
<p>Map:</p>
<div class="map-margin" id="gmap-#item.Id" data-id="#item.Id" style="min-height: 270px; height: 270px; min-width: 470px; width: 470px"></div>
}

MVC Google Map Polylines

I'm trying to create a Google Map that will draw out a race course from a list of lat & lng in my MVC model. I have successfully done this with markers but I need to do it with polylines to create a path of the course. Below is what I have but can't get the lines to show up.
Any suggestions?
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=false"></script>
<script>
function initialize() {
var mapOptions = {
zoom: 10,
center: new google.maps.LatLng(#Model.Courses.Latitude, #Model.Courses.Longitude),
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
#foreach (var item in Model.CourseRatings.ValuesList)
{
<text>addMarker(#item.Item2, #item.Item3)</text>
}
var flightPath = new google.maps.Polyline({
path: function addMarker(x, y) { new google.maps.LatLng(x, y); },
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
Thank you!
For the path in your flightPath Polyline, supply it with an array of your points, rather than a reference to a function. Which should looks something like this:
var flightPlanCoordinates = [
new google.maps.LatLng(37.772323, -122.214897),
new google.maps.LatLng(21.291982, -157.821856),
new google.maps.LatLng(-18.142599, 178.431),
new google.maps.LatLng(-27.46758, 153.027892)
];
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
Also consider using the snap to road api to smoother your polyline.
This worked for me but I'm going to try the smoothing you mentioned:
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=false"></script>
<script>
function initialize() {
var mapOptions = {
zoom: 10,
center: new google.maps.LatLng(#Model.Courses.Latitude, #Model.Courses.Longitude),
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var flightPathCoordinates =
[
#foreach (var item in Model.CourseRatings.ValuesList)
{
<text>new google.maps.LatLng(#item.Item2, #item.Item3),</text>
}
];
var flightPath = new google.maps.Polyline({
path: flightPathCoordinates,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>

JQuery Mobile and Google Maps directions trouble

I'm having a little problme with my code and i don't know what is it. I'm traying to draw the directions between to places but the code doesn't work. I try with this page: https://developers.google.com/maps/documentation/javascript/directions#TravelModes but i can't get it. Thanks ! Here is the code:
$(document).ready(function() {
$('#Encuentrame').click(function() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(exito, error);
} else {
error('El navegador no soporta GeoLocalizacion');
}
});
});
function exito(position) {
var marcadorCasa = new google.maps.LatLng(-34.5688496,-58.4322009); //establece la posicion de un marcador que elijo
var plazaDeMayo = new google.maps.LatLng(-34.60841643923174,-58.37216913700104);
var directionsDisplay;
directionsDisplay = new google.maps.DirectionsRenderer();
var directionsService = new google.maps.DirectionsService();
var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var myOptions = {
zoom: 19,
center: latlng,
mapTypeControl: false,
navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var mapcanvas = $('#mapcanvas');
var map = new google.maps.Map(mapcanvas[0], myOptions);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title:"Creo que estoy aca !"
});
directionsDisplay.setMap(map);
var lugarCasa = new google.maps.Marker({
position:marcadorCasa,
map:map,
title:"CASA",
animation: google.maps.Animation.BOUNCE
});
var plaza = new google.maps.Marker({
position:plazaDeMayo,
map:map,
animation: google.maps.Animation.BOUNCE,
title:"Plaza de Mayo"
});
var requerimientoDeDirecciones = new google.maps.DirectionsRequest({
origin: latlng,
destination: LugarCasa,
travelMode: google.maps.TravelMode.BICYCLING,
unitSystem: UnitSystem.METRIC,
});
directionsService.route(requerimientoDeDirecciones, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(result);
}
});
}
There are some errors in your code :
google.maps.DirectionsRequest doesn't really exist. The Google Maps documentation does not indicate any constructor. It should be define as an anonymous object.
origin and destination have to be google.maps.LatLng or String. That was not the case for LugarCasa in your code.
You was using UnitSystem.METRIC instead of google.maps.UnitSystem.METRIC.
Here's a working version :
var requerimientoDeDirecciones = {
origin: latlng,
destination: marcadorCasa,
travelMode: google.maps.TravelMode.BICYCLING,
unitSystem: google.maps.UnitSystem.METRIC
};

Resources