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>
}
Related
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"
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 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 am using a Fusion Table and the Google Map API and would like to know if I can automatically trigger an event when a marker is placed.
Currently I can click on the map and I get a customized infowindow, but I want to do the same thing but after geocoding and placing a marker... I would like this to happen automatically.
Here is my code so far:
var FusionTableID = '<?php echo get_theme_mod( 'fusion_id' )?>';
var map = null;
var geocoder = null;
var marker = null;
function initialize() {
geocoder = new google.maps.Geocoder();
var local = new google.maps.LatLng(<?php echo get_theme_mod( 'lat-long' )?>);
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: local,
zoom: <?php echo get_theme_mod( 'zoom' )?>
});
// forces a refresh to from Fusion Tables
//var and=' geometry does not contain "'+new Date().getTime()+'"';
var layer = new google.maps.FusionTablesLayer({
//suppressInfoWindows: true,
query: {
select: "col2\x3e\x3e0",
from: FusionTableID,
where: ""
},
options: {
styleId: 2,
templateId: 2
},
map: map
});
layer.setMap(map);
google.maps.event.addListener(layer, "click", function(e) {
var point = e.latLng.toUrlValue(6);
var latlngStr = point.split(',', 2);
var lat = parseFloat(latlngStr[0]);
var lng = parseFloat(latlngStr[1]);
var latlng = new google.maps.LatLng(lat, lng);
if (marker && marker.setMap) marker.setMap(null);
marker = new google.maps.Marker({
position: latlng,
map: map
});
console.log(e.row['objectid'].value);
var tname = e.row['name'].value; // name
var targetDist = e.row['description'].value; // description
// poplulate the infowindow
e.infoWindowHtml = "<div class=\"grid-100\"><h2>"+tname+"</h2>"+targetDist+"<hr></div>";
});
}
function showAddress() {
var address = document.getElementById('address').value;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (marker && marker.setMap) marker.setMap(null);
marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
if (results[0].geometry.viewport)
map.fitBounds(results[0].geometry.viewport);
// THIS DOESN'T WORK ****
new google.maps.event.trigger( marker, 'click' );
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
Thanks geocodezip
It isn't really possible to "trigger" a click on a FusionTablesLayer (you can, but you basically need to replicate the information in the click event, which is painful), you can query the table an create your own infowindow on the marker though
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
};