trigger a marker click - google-fusion-tables

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

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"

geodesic map for a single source and multiple destination gmap4 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

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>
}

GeoXML3 - Open an info window automatically

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

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