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"
Related
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
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>
}
I am trying to load google map in ionic app environment. It works on perfectly on browser. But, I can only see my tabs with a blank screen in the place of map when I load the app on to iphone and simulator. I tried with both google browser api key and also with ios key. Please help me.
Here is my controller and html.
controller:
angular.module('starter.controllers', [])
.controller('DashCtrl', function($scope, $state, $cordovaGeolocation, $ionicLoading ) {
var options = {timeout: 10000, enableHighAccuracy: true};
$cordovaGeolocation.getCurrentPosition(options).then(function (position) {
var latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var mapOptions = {
center: latLng,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
$scope.map = new google.maps.Map(document.getElementById("map"), mapOptions);
//Wait until the map is loaded
google.maps.event.addListenerOnce($scope.map, 'idle', function () {
var marker = new google.maps.Marker({
map: $scope.map,
animation: google.maps.Animation.DROP,
position: latLng
});
var infoWindow = new google.maps.InfoWindow({
content: "Here I am!"
});
google.maps.event.addListener(marker, 'click', function () {
infoWindow.open($scope.map, marker);
});
});
}, function (error) {
console.log("Could not get location");
});
//center function
$scope.centerOnMe = function () {
console.log("Centering");
if (!$scope.map) {
return;
}
$scope.loading = $ionicLoading.show({
content: 'Getting current location...',
template: '<ion-spinner class="spinner-energized"></ion-spinner>',
showBackdrop: false
});
$cordovaGeolocation.getCurrentPosition(options).then(function (position) {
var latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var mapOptions = {
center: latLng,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
$scope.loading.hide();
$scope.map = new google.maps.Map(document.getElementById("map"), mapOptions);
});
}
})
here is my HTML:
<ion-view view-title="mymap">
<ion-content>
<div id="map" style="width: 100%;height: 100%;" data-tap-disabled="true"> </div>
I have created a polygon and would like the info window to open automatically on load. How do I do this?
This is what I have so far:
var geoxml = null;
function initialize() {
infoWindow = new google.maps.InfoWindow();
var myLatlng = new google.maps.LatLng(100.9530044, 110.8574693);
var myOptions = {
maxZoom: 13,
center: myLatlng,
streetViewControl: false,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
},
mapTypeId: google.maps.MapTypeId.ROADMAP,
};
map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
geoXml = new geoXML3.parser({
map: map,
singleInfoWindow: true,
infoWindowOptions: {maxWidth:350,cornerRadius: 12},
});
geoXml.parse('file.xml');
};
You can trigger a click on the placemark (polygon), when the KML is done rendering (the map idle event fires). This will open the infowindow on the first placemark:
google.maps.event.addListenerOnce(map, 'idle', function() {
google.maps.event.trigger(geoXml.docs[0].placemarks[0].polygon,'click')
});
working example
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
};