I have a website (www.auscem.com) with a link below the table to a Fusion table map. Currently, markers on the map are clickable to get the infoWindow, but I would like to make them mouseover instead. The present script is (slightly abbreviated):
var map;
var layer;
var tableid = xxxxxxx;
function load()
{
map = new google.maps.Map(document.getElementById('mapDiv'),
{
center: new google.maps.LatLng(-25.274, 133.775),
zoom: 4, //zoom
mapTypeId: google.maps.MapTypeId.ROADMAP //the map style
});
layer = new google.maps.FusionTablesLayer(tableid, {suppressInfoWindows: false});
layer.setQuery("SELECT 'Latitude' FROM " + tableid);
layer.setMap(map);
google.maps.event.addListener(layer, "click", function(event)
{
document.getElementById('siteInfo').innerHTML = event.infoWindowHtml;
});
}
// execute this
window.onload = load;
I've tried all sorts of things,, but have not gotten it working.
Ideas would be most welcome....
Paul
Have you seen the FusionTips utility library? It does tooltips based off of FusionTables data. You should be able to convert it to doing InfoWindows, I'm not sure how efficient it will be.
Related
I'm new to google maps and javascript . I'm trying to interact with the map using external links/lists.
My main problem is that i'm unable to select the marker on the map with its id.
I don't want to put all markers in a list/array and iterate over them since i don't know how many there will be at any point.
I simply want to select them by their id and work with them such as opening infowindow , removing them etc...
in my changeIcon() function , i tried some ways but none worked so far .
<html>
....
<div id="mapview"></div>
<a class="test-link" onmouseover="changeIcon()">Link</a>
<script>
function changeIcon()
{
//marker = map.selectMarker("4");
//marker = markers[4];
//infowindow.open(map,marker);
//$("#mapview").map.removeMarker(4);
}
var map = new google.maps.Map(document.getElementById('mapview'),
{
center: {lat: 44.540, lng: -78.546},
zoom: 16
});
function initMap()
{
var marker = new google.maps.Marker({
position: userPosition,
map: map,
id: 4
});
}
</script>
</html>
............................................
There is no API to get marker from map. ref:
"https://developers.google.com/maps/documentation/javascript/reference"
I think you dont want to use array because id will never match the index. So I suggest using dictionary:
var markers = {}; // "{}" to specify dictionary instead of "[]" to specify array
when you create marker, you add it to dictionary:
markers[4] = marker; // 4 is the id
when you want to get it:
var currentMarker = markers[4];
I am mapping 20k records from Google Fusion table using standard circle. I would like to group them using MarkerClusters. Because there is filtering and search occuring, I am not sure where to place the var markerCluster = new MarkerClusterer(map, markers); code.
Here is the map.
Code snippet where markers are created:
//*New Fusion Tables Requirement* API key. found at https://code.google.com/apis/console/
//*Important* this key is for demonstration purposes. please register your own.
googleApiKey: "AIzaSyDj8qostHt2L3aetpO_LuipyS6YvfeZOFA",
//name of the location column in your Fusion Table.
//NOTE: if your location column name has spaces in it, surround it with single quotes
//example: locationColumn: "'my location'",
locationColumn: "geo_coordinates",
map_centroid: new google.maps.LatLng(40.7127,-74.0059), //center that your map defaults to
locationScope: "new york city", //geographical area appended to all address searches
recordName: "result", //for showing number of results
recordNamePlural: "results",
searchRadius: 805, //in meters ~ 1/2 mile
defaultZoom: 13, //zoom level when map is loaded (bigger is more zoomed in)
addrMarkerImage: 'images/blue_pin.png',
currentPinpoint: null,
initialize: function() {
$( "#result_count" ).html("");
geocoder = new google.maps.Geocoder();
var myOptions = {
zoom: MapsLib.defaultZoom,
center: MapsLib.map_centroid,
mapTypeId: google.maps.MapTypeId.TERRAIN,
};
map = new google.maps.Map($("#map_canvas")[0],myOptions);
map.setTilt(45);
map.setOptions({ styles : styles });
// maintains map centerpoint for responsive design
google.maps.event.addDomListener(map, 'idle', function() {
MapsLib.calculateCenter();
});
google.maps.event.addDomListener(window, 'resize', function() {
map.setCenter(MapsLib.map_centroid);
});
MapsLib.searchrecords = null;
So I display a map on my website and I want after the user has used his mouse to drag around the map and hits a submit button on the site to save the current map status, in order to display it later on, so what I need is to get the current lat and long of the map after the user has used the map.
So afterwards if the user comes back I can display the same map by setiing LatLng
<script
type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=initialize"></script>
function initialize() {
var mapCanvas = document.getElementById('map_canvas');
var mapOptions = {
center: new google.maps.LatLng(44.5403, -78.5463),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(mapCanvas, mapOptions);
}
//LE
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=initialize"></script>
<script type="text/javascript">
var map;
function initialize() {
var mapCanvas = document.getElementById('map_canvas');
var mapOptions = {
center: new google.maps.LatLng(44.5403, -78.5463),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(mapCanvas, mapOptions);
}
$(window).load(function(){
google.maps.event.addDomListener(window, 'load', initialize);
});
$(document).ready(function(){
var currentLL = map.getCenter(); // you can even store it in localStorage
var currentZoom = map.getZoom();
console.log(currentLL);
});
</script>
Once the user hits the submit button, get the center position(lat/lng) of the Google Maps. This is the wise option to retain the map.
var currentLL = map.getCenter(); // you can even store it in localStorage
var currentZoom = map.getZoom(); // better to save zoom level too
once you return back to maps, set it has center
map.setCenter(currentLL);
map.setZoom(currentZoom);
You can use #Praveen's solution, but don't place that code in document ready function. Place it in a separate function and call that function when the user hits the save button.
Or you can use the Maps API event listeners for that.
You mentioned that you want to save the location when hitting a button and after the user has used his mouse to drag around the map. I suggest that you get the center and zoom when the map becomes idle. That is, when the map becomes idle after panning or zooming. See the documentation.
You could use the dragend event but that would not work if the user only changed the zoom level.
google.maps.event.addListener(map, 'idle', function() {
currentLL = map.getCenter();
currentZoom = map.getZoom();
console.log(currentLL, currentZoom);
});
This way, you always have the latest center and zoom level available.
JSFiddle demo
I'm dynamically loading latitude/longitude variables and passing them to the Google Maps Initialize(); function.
function initialize() {
var lat = $('.map_img', '.inview').attr('data-lat');
var lng = $('.map_img', '.inview').attr('data-lng');
var myLatlng = new google.maps.LatLng(lat, lng);
var mapOptions = {
zoom: 15,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map
});
google.maps.event.trigger(map, 'resize');
}
So I'm pulling these coordinates via the data attribute, which is set via a wordpress widget and giving them to Google Maps.
I want to run the function, getting new coordinates every time the user clicks these left/right buttons.
previous
next
$('.btn-prev').click(function () {
//initialize maps script again
initialize();
});
$('.btn-next').click(function () {
//initialize maps script again
initialize();
});
Then the user clicks on a Map image which opens the large map with the new coordinates.
var mapImg = $('.map_img');
var $overlay = $('.overlay'),
resize = true,
map;
mapImg.click(function () {
$overlay.show();
if (resize) {
initialize();
resize = false;
}
});
The problem I'm having is that after the first click the Map is not centered. I had assumed google.maps.event.trigger(map, 'resize'); would solve this problem.
I'm not sure why this is happening so I've created a fiddle to replicate the issue.
http://jsfiddle.net/SEOplay/3CXSs/13/
Help much appreciated.
Try using:
google.maps.event.addDomListener(window, "click", function () {
var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);
});
Not efficient code because I'm not excatly sure how it fits into your code, but it will recenter the map every time someone clicks somewhere. It should give you some idea of the code you need, if you have any trouble let me know.
JSFiddle (you also seem to have a bug where it doesn't change the map on the first next/prev click.
Is there any way how to get event when marker opened? In map I have about two thousands markers and each have own streetview in infobox. Streetview have source in google api, so page loading is too slow (2000+ streetview images loading in one moment). There is something like this (asynchronous loading)?
$(window).bind('eventWhenMarkerWasOpened', function(){
$('#infowindow').append('<img src="here is path to streetview google api" />');
});
There is a domready-event for the infobox that should be a good place to extend the contents of the infobox:
google.maps.event.addListener(infoboxObject,
'domready',
function(){/*do something*/});
How about using FusionTableLayers instead of normal markers?
FusionTables enables you to load the tons of markers quickly, and you can use a few SQLs.
var infoWnd, map;
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(41.850033, -87.6500523),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
infoWnd = new google.maps.InfoWindow();
var layer = new google.maps.FusionTablesLayer({
query: {
select: '\'Geocodable address\'',
from: '1mZ53Z70NsChnBMm-qEYmSDOvLXgrreLTkQUvvg'
},
suppressInfoWindows : true
});
layer.setMap(map);
google.maps.event.addListener(layer, "click", onLayerClicked);
}
function onLayerClicked(evt) {
var imgUrl = "http://maps.googleapis.com/maps/api/streetview?" +
"size=400x300&" +
"sensor=false&" +
"location=" + evt.latLng.toUrlValue();
infoWnd.setPosition(evt.latLng);
infoWnd.setContent("<img src='" + imgUrl + "'>");
infoWnd.open(map);
return false;
}
google.maps.event.addDomListener(window, "load", initialize);