var map;
var Sightings = [
{lat:20.735280,lng:-105.401653,title:"Tournefortia hartwegiana",code:'TOHA',sightingid:'40888'},
{lat:20.735280,lng:-105.401653,title:"Heermann's Gull",code:'HEGU',sightingid:'40869'},
{lat:20.735397,lng:-105.401703,title:"Belted Kingfisher",code:'BEKI',sightingid:'40877'}
];
const sightingIcon = {
path: "M 0 0 L 4 -4 L 4 -16 L 26 -16 L 26 -34 L -26 -34 L -26 -16 L -4 -16 L -4 -4 Z",
fillOpacity:1,
fillColor:"#ffcc00",
strokeWeight:1,
strokeColor:"#000",
scale:1,
labelOrigin: {x:0, y:-25}
};
function initMap(){
map = new google.maps.Map(document.getElementById('GoogleMap'), {mapTypeId: 'satellite',streetViewControl:false,overviewMapControl:true,scaleControl:true});
var bounds = new google.maps.LatLngBounds();
var oms = new OverlappingMarkerSpiderfier(map,
{markersWontMove: true,
markersWontHide: true,
basicFormatEvents: true,
nudgeRadius: 20,
nearbyDistance: 40,
circleSpiralSwitchover: 8,
spiralFootSeparation:20,
spiralLengthStart: 16,
spiralLengthFactor: 12,
circleFootSeparation:50,
circleStartAngle: 180});
var markers = new Array();
for (var i = 0; i < Sightings.length; i++) {
bounds.extend(Sightings[i]);
var markerData = Sightings[i];
var marker = new google.maps.Marker({position:Sightings[i], title: Sightings[i].title, label: Sightings[i].code, opacity: 1, icon: sightingIcon});
markers.push(marker);
marker.addListener('spider_click', function(e) {});
oms.addMarker(marker);
}
var markerCluster = new MarkerClusterer(map, markers,{imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m',maxZoom:18});
map.fitBounds(bounds);
}
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OverlappingMarkerSpiderfier/1.0.3/oms.min.js"></script>
<script src='https://unpkg.com/#google/markerclustererplus#4.0.1/dist/markerclustererplus.min.js'></script>
<script defer src='https://maps.googleapis.com/maps/api/js?callback=initMap&key=YOUR_API_KEY'></script>
<body>
<h1>Hello World</h1>
<div id='GoogleMap' style='height: 600px; width: 100%;'></div>
</body>
</html>
I am using Google Maps API for Javascript on a web page. Creating several Markers from an array with Lat/Lng and using overlapping-marker-spiderfier and markerclusterer for their intended use from an example I found elsewhere.
My problem is that Markers still Overlap one another when de-spiderfied/de-clustered. Clicking on the overlapped markers correctly spiderfies them and shows each. This is confusing to the end-user as they don't know that some of the markers are hidden/overlapped and don't click.
I tried using the Nudge options in spiderfier, but they seem to have no effect. The Nudge options are defined here: https://openbase.com/js/overlapping-marker-spiderfier/documentation
I am wondering if I am not referencing the latest Spider code.
Any ideas how to prevent these overlapped markers? TO BE CLEAR, I am trying to get rid of the issue as shown in the 2nd screenshot below, where the markers are overlapping, but should be nudged a bit to the side in order to show multiple markers.
Use the latest version of the Overlapping Marker Spiderfier (1.1.4) the version that goes with the documentation you reference
To get the cdn link use the combination of the GitHub project: OverlappingMarkerSpiderfier by fritz-c and the version
<script src="https://cdn.jsdelivr.net/gh/fritz-c/OverlappingMarkerSpiderfier#1.1.4/dist/oms.min.js"></script>
proof of concept fiddle
Working code snippet:
var map;
var Sightings = [{
lat: 20.735280,
lng: -105.401653,
title: "Tournefortia hartwegiana",
code: 'TOHA',
sightingid: '40888'
},
{
lat: 20.740620,
lng: -105.394615,
title: "Rufous-bellied Chachalaca",
code: 'RBCH',
sightingid: '40862'
},
{
lat: 20.739182,
lng: -105.395732,
title: "Inca Dove",
code: 'INDO',
sightingid: '40863'
},
{
lat: 20.738601,
lng: -105.399059,
title: "Squirrel Cuckoo",
code: 'SQCU',
sightingid: '40864'
},
{
lat: 20.738876,
lng: -105.397491,
title: "Broad-billed Hummingbird",
code: 'BBHU',
sightingid: '40865'
},
{
lat: 20.736121,
lng: -105.403218,
title: "Whimbrel",
code: 'WHIM',
sightingid: '40866'
},
{
lat: 20.736850,
lng: -105.405225,
title: "Spotted Sandpiper",
code: 'SPSA',
sightingid: '40867'
},
{
lat: 20.736135,
lng: -105.403247,
title: "Willet",
code: 'WILL',
sightingid: '40868'
},
{
lat: 20.735280,
lng: -105.401653,
title: "Heermann's Gull",
code: 'HEGU',
sightingid: '40869'
},
{
lat: 20.739167,
lng: -105.395756,
title: "Magnificent Frigatebird",
code: 'MAFR',
sightingid: '40870'
},
{
lat: 20.735632,
lng: -105.401692,
title: "Blue-footed Booby",
code: 'BFBO',
sightingid: '40871'
},
{
lat: 20.738925,
lng: -105.397099,
title: "Brown Pelican",
code: 'BRPE',
sightingid: '40872'
},
{
lat: 20.736121,
lng: -105.403218,
title: "Snowy Egret",
code: 'SNEG',
sightingid: '40873'
},
{
lat: 20.737766,
lng: -105.401894,
title: "Black Vulture",
code: 'BLVU',
sightingid: '40874'
},
{
lat: 20.740601,
lng: -105.394636,
title: "Turkey Vulture",
code: 'TUVU',
sightingid: '40875'
},
{
lat: 20.738880,
lng: -105.397410,
title: "Gray Hawk",
code: 'GRHA',
sightingid: '40876'
},
{
lat: 20.735397,
lng: -105.401703,
title: "Belted Kingfisher",
code: 'BEKI',
sightingid: '40877'
},
{
lat: 20.740608,
lng: -105.394595,
title: "Orange-fronted Parakeet",
code: 'OFPA',
sightingid: '40878'
},
{
lat: 20.740620,
lng: -105.394615,
title: "Greenish Elaenia",
code: 'GREL',
sightingid: '40879'
},
{
lat: 20.740033,
lng: -105.394573,
title: "Social Flycatcher",
code: 'SOFL',
sightingid: '40880'
},
{
lat: 20.737745,
lng: -105.403846,
title: "Tropical Kingbird",
code: 'TRKI',
sightingid: '40881'
},
{
lat: 20.738877,
lng: -105.397251,
title: "Plumbeous Vireo",
code: 'PLVI',
sightingid: '40882'
},
{
lat: 20.738584,
lng: -105.399194,
title: "San Blas Jay",
code: 'SBJA',
sightingid: '40883'
},
{
lat: 20.739244,
lng: -105.396119,
title: "Blue-gray Gnatcatcher",
code: 'BGGN',
sightingid: '40884'
},
{
lat: 20.738886,
lng: -105.397373,
title: "Happy Wren",
code: 'HAWR',
sightingid: '40885'
},
{
lat: 20.738584,
lng: -105.399194,
title: "Sinaloa Wren",
code: 'SIWR',
sightingid: '40886'
},
{
lat: 20.739209,
lng: -105.396036,
title: "Streak-backed Oriole",
code: 'SBOR',
sightingid: '40887'
}
];
const sightingIcon = {
path: "M 0 0 L 4 -4 L 4 -16 L 26 -16 L 26 -34 L -26 -34 L -26 -16 L -4 -16 L -4 -4 Z",
fillOpacity: 1,
fillColor: "#ffcc00",
strokeWeight: 1,
strokeColor: "#000",
scale: 1,
labelOrigin: {
x: 0,
y: -25
}
};
function initMap() {
map = new google.maps.Map(document.getElementById('GoogleMap'), {
mapTypeId: 'satellite',
streetViewControl: false,
overviewMapControl: true,
scaleControl: true
});
google.maps.event.addListener(map, 'click', function(evt) {
console.log(evt.latLng.toUrlValue(6)+" zoom="+map.getZoom());
})
var bounds = new google.maps.LatLngBounds();
var oms = new OverlappingMarkerSpiderfier(map, {
markersWontMove: true,
markersWontHide: true,
basicFormatEvents: true,
nearbyDistance: 40,
circleSpiralSwitchover: 8,
spiralFootSeparation: 20,
spiralLengthStart: 16,
spiralLengthFactor: 12,
circleFootSeparation: 50,
circleStartAngle: 180,
keepSpiderfied: true,
});
var markers = new Array();
for (var i = 0; i < Sightings.length; i++) {
(function() {
bounds.extend(Sightings[i]);
var markerData = Sightings[i];
var marker = new google.maps.Marker({
position: Sightings[i],
title: Sightings[i].title,
label: Sightings[i].code,
opacity: 1,
icon: sightingIcon
});
markers.push(marker);
marker.addListener('spider_click', function(e) {
console.log(this.getPosition().toUrlValue(6)+" title:"+this.getTitle()+" spider_click")
});
marker.addListener('click', function(e) {
console.log(this.getPosition().toUrlValue(6)+" title:"+this.getTitle()+" click")
});
marker.addListener('format', function(e) {
console.log(this.getPosition().toUrlValue(6)+" title:"+this.getTitle()+" format")
});
marker.addListener('unspiderfy', function(e) {
console.log(this.getPosition().toUrlValue(6)+" title:"+this.getTitle()+" unspiderfy")
});
marker.addListener('spiderfy', function(e) {
console.log(this.getPosition().toUrlValue(6)+" title:"+this.getTitle()+" spiderfy")
});
oms.addMarker(marker);
})();
}
var markerCluster = new MarkerClusterer(map, markers, {
imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m',
maxZoom: 18
});
// map.fitBounds(bounds);
map.setCenter({lat:20.736114,lng:-105.403252});
map.setZoom(19);
google.maps.event.addListener(markerCluster, 'click', function(evt) {
console.log("markerClusterer click:"+evt.markers_.length);
for (var i=0; i<evt.markers_.length; i++) {
console.log(evt.markers_[i].getPosition().toUrlValue(6)+" label="+evt.markers_[i].getLabel());
google.maps.event.trigger(evt.markers_[i],"click");
}
});
}
google.maps.event.addDomListener(window, 'load', initMap);
html,
body {
height: 100%;
width: 100%;
padding: 0px;
margin: 0px;
}
#GoogleMap {
height: 70%;
}
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<!-- jsFiddle will insert css and js -->
</head>
<body>
<h1>Hello World</h1>
<div id='GoogleMap'></div>
<!-- Async script executes immediately and must be after any DOM elements used in callback. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&v=weekly&channel=2"></script>
<script src="https://cdn.jsdelivr.net/gh/fritz-c/OverlappingMarkerSpiderfier#1.1.4/dist/oms.min.js"></script>
<script src='https://unpkg.com/#google/markerclustererplus#4.0.1/dist/markerclustererplus.min.js'></script>
</body>
</html>
Related
I want to get the content property of the array place of interest, so below the if marker.content is giving me undefined then I create the new google.maps.InfoWindow
Code:
var map = null;
placesOfInterest = [
{ name: 'Charme da paulista', lat: -23.562172, lng: -46.655794, content:'<h1>Charme</h1>' },
{ name: 'The Blue Pub', lat: -23.563112, lng: -46.650338, content:'<h1>The Blue Pub</h1>' },
{ name: 'Veloso', lat: -23.585107, lng: -46.635219 },
{ name: 'Let\'s Beer', lat: -23.586508, lng: -46.641739 },
{ name: 'O\'Malley\'s', lat: -23.558296, lng: -46.665923 },
{ name: 'Finnegan\'s', lat: -23.559547, lng: -46.676794 },
{ name: 'Partisans', lat: -23.561049, lng: -46.682555 },
{ name: 'Morrison', lat: -23.555106, lng: -46.690883 },
{ name: 'Cão Véio', lat: -23.558130, lng: -46.679508 },
{ name: 'Cervejaria Nacional', lat: -23.564740, lng: -46.690641 },
{ name: 'Brewdog', lat: -23.561309, lng: -46.693935 },
{ name: 'Rei das Batidas', lat: -23.570613, lng: -46.705977 }
];
const customIcon = {
path: 'M0-48c-9.8 0-17.7 7.8-17.7 17.4 0 15.5 17.7 30.6 17.7 30.6s17.7-15.4 17.7-30.6c0-9.6-7.9-17.4-17.7-17.4z',
fillColor: '#F7B217',
fillOpacity: 0.98,
scale: 0.98,
strokeColor: '#666666',
strokeWeight: 3
};
function addMarker(marker) {
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(marker.lat, marker.lng),
icon: customIcon,
title: marker.name,
});
if(marker.content){
var infoWindow = new google.maps.InfoWindow({
content:marker.content
});
marker.addListener('click',function(){
infoWindow.open(map, marker)
});
}
}
function initMap() {
var mapOptions = {
center: new google.maps.LatLng(-23.562172, -46.655794),
gestureHandling: 'greedy',
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP]
},
disableDefaultUI: true,
scaleControl: true,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.DEFAULT,
}
};
map = new google.maps.Map(document.getElementById('map'), mapOptions);
//Adicionando o primeiro marcador como exemplo
for(var i = 0;i< placesOfInterest.length;i++ ){
addMarker(placesOfInterest[i]);
}
}
In your addMarker function, you are overwriting the input marker data with a new google.maps.Marker object, so the marker.content property never exists.
Rename either the input argument or the internal marker variable to avoid the conflict:
function addMarker(marker) {
var gmarker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(marker.lat, marker.lng),
icon: customIcon,
title: marker.name,
});
if(marker.content){
var infoWindow = new google.maps.InfoWindow({
content:marker.content
});
gmarker.addListener('click',function(){
infoWindow.open(map, gmarker)
});
}
}
proof of concept fiddle
code snippet:
var map = null;
var placesOfInterest = [{
name: 'Charme da paulista',
lat: -23.562172,
lng: -46.655794,
content: '<h1>Charme</h1>'
}
];
const customIcon = {
path: 'M0-48c-9.8 0-17.7 7.8-17.7 17.4 0 15.5 17.7 30.6 17.7 30.6s17.7-15.4 17.7-30.6c0-9.6-7.9-17.4-17.7-17.4z',
fillColor: '#F7B217',
fillOpacity: 0.98,
scale: 0.98,
strokeColor: '#666666',
strokeWeight: 3
};
function addMarker(marker) {
var gmarker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(marker.lat, marker.lng),
icon: customIcon,
title: marker.name,
});
if (marker.content) {
var infoWindow = new google.maps.InfoWindow({
content: marker.content
});
gmarker.addListener('click', function() {
infoWindow.open(map, gmarker)
});
}
}
function initMap() {
var mapOptions = {
center: new google.maps.LatLng(-23.562172, -46.655794),
gestureHandling: 'greedy',
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP]
},
disableDefaultUI: true,
scaleControl: true,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.DEFAULT,
}
};
map = new google.maps.Map(document.getElementById('map'), mapOptions);
//Adicionando o primeiro marcador como exemplo
for (var i = 0; i < placesOfInterest.length; i++) {
addMarker(placesOfInterest[i]);
}
}
html,
body,
#map {
height: 100%;
margin: 0;
padding: 0;
}
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
I created a polygon area on this page
I need to create an infoWindow that opens on mouseover. I found information on opening an infoWindow on mouseclick on markers but not on a polygon area.
<div id="map"></div>
<script>
// This is a simple polygon representing the MRPD Rescue Zone.
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 9,
center: {lat: -16.4836, lng: 145.4653},
mapTypeId: 'terrain'
});
// Definition of the LatLng coordinates for the polygon's path.
var polygonCoords = [
{lat: -16.4836, lng: 145.4653},
{lat: -16.4500, lng: 145.4133},
{lat: -16.2319, lng: 145.4763},
{lat: -16.0878, lng: 145.4548},
{lat: -16.0454, lng: 145.9000},
{lat: -16.4861, lng: 146.1269},
{lat: -16.7229, lng: 145.6500},
{lat: -16.5913, lng: 145.5192},
];
// Construction of polygon.
var mrpdPolygon = new google.maps.Polygon({
paths: polygonCoords,
strokeColor: '#FF0000',
strokeOpacity: 0.6,
strokeWeight: 1,
fillColor: '#FF0000',
fillOpacity: 0.10
});
mrpdPolygon.setMap(map);
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=API_Key&callback=initMap">
</script>
add a mouseover and mouseout event to the polygon:
function mousefn(evt) {
infowindow.setContent("polygon<br>coords:" + bounds.getCenter().toUrlValue(6));
infowindow.setPosition(bounds.getCenter()); // or evt.latLng
infowindow.open(map);
}
google.maps.event.addListener(mrpdPolygon, 'mouseover', mousefn);
google.maps.event.addListener(mrpdPolygon, 'mouseout', function(evt) {
infowindow.close();
infowindow.opened = false;
});
proof of concept fiddle
code snippet:
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<div id="map"></div>
<script>
// This is a simple polygon representing the MRPD Rescue Zone.
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 9,
center: {
lat: -16.4836,
lng: 145.4653
},
mapTypeId: 'terrain'
});
// Construction of polygon.
var mrpdPolygon = new google.maps.Polygon({
paths: polygonCoords,
strokeColor: '#FF0000',
strokeOpacity: 0.6,
strokeWeight: 1,
fillColor: '#FF0000',
fillOpacity: 0.10
});
mrpdPolygon.setMap(map);
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < mrpdPolygon.getPath().getLength(); i++) {
bounds.extend(mrpdPolygon.getPath().getAt(i));
}
var infowindow = new google.maps.InfoWindow();
infowindow.opened = false;
function mousefn(evt) {
infowindow.setContent("polygon<br>coords:" + bounds.getCenter().toUrlValue(6));
infowindow.setPosition(bounds.getCenter());
infowindow.open(map);
}
google.maps.event.addListener(mrpdPolygon, 'mouseover', mousefn);
// google.maps.event.addListener(mrpdPolygon, 'mousemove', mousefn);
google.maps.event.addListener(mrpdPolygon, 'mouseout', function(evt) {
infowindow.close();
infowindow.opened = false;
});
}
// Definition of the LatLng coordinates for the polygon's path.
var polygonCoords = [{
lat: -16.4836,
lng: 145.4653
},
{
lat: -16.4500,
lng: 145.4133
},
{
lat: -16.2319,
lng: 145.4763
},
{
lat: -16.0878,
lng: 145.4548
},
{
lat: -16.0454,
lng: 145.9000
},
{
lat: -16.4861,
lng: 146.1269
},
{
lat: -16.7229,
lng: 145.6500
},
{
lat: -16.5913,
lng: 145.5192
},
];
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>
you will add mouseover event to the div id "map"
JavaScript code:
//Select html element
const mapInfo = document.querySelector("#map");
//add mouseover event to the selected element
mapInfo.addEventListener ('mouseover', initMap);
Visit this https://developers.google.com/maps/documentation/javascript/infowindows link for more information. I hope this helps.
I am new to this forum (this is my first post) and a beginner in using google map with javascript. I hope I apologize if the question is silly.
I have an arrangement with several cities and want to focus the map according to the result of a random number. I'm using the attached code, but does not work me. Can anyone see what I am doing wrong? Thank you.
<script>
var myrand=0
function initialize() {
var i;
var Locations = [
{
lat: 40.7127837,
lon: -74.00594130000002,
title: "New york",
description: "I'm number 1"
},
{
lat: 23.634501,
lon: -102.55278399999997,
title: "Mexico",
description: "I'm number 2"
},
{
lat: 36.778261,
lon: -119.41793239999998,
title: "California",
description: "I'm number 3"
}
];
var myOptions = {
zoom: 4,
center: new google.maps.LatLng(30.011902,-98.48424649999998),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
//var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
map = new google.maps.Map(document.getElementById('map-canvas'), myOptions);
var infowindow = new google.maps.InfoWindow({
content: ''
});
// loop over our array
for (i = 0; i < Locations.length; i++) {
// create a marker
var marker = new google.maps.Marker({
title: Locations[i].title,
position: new google.maps.LatLng(Locations[i].lat, Locations[i].lon),
map: map
});
// add an event listener for this marker
bindInfoWindow(marker, map, infowindow, "<p>" + Locations[i].description + "</p>");
//bindInfoWindow(marker, map, infowindow, Locations[i].description);
}
}
function bindInfoWindow(marker, map, infowindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(html);
infowindow.open(map, marker);
//alert("seleccionado el "+html);
});
}
function aleatorio(min,max)
{
myrand = Math.floor(Math.random()*(max-min+1)+min);
alert('salió '+ myrand);
map.setCenter({lat: Locations[myrand].lat, lng: Locations[myrand].lon});
return Math.floor(Math.random()*(max-min+1)+min);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
You have typos in your code:
the random number function in javascript is Math.random, not Math.myrandom.
the function aleatorio depends on the array Locations being in scope. Currently that array is local to the initialize function. You either need to move aleatorio inside the initialize function or move the Locations array into the global namespace.
proof of concept fiddle
code snippet:
var myrand = 0
function initialize() {
var i;
var Locations = [{
lat: 40.7127837,
lon: -74.00594130000002,
title: "New york",
description: "I'm number 1"
}, {
lat: 23.634501,
lon: -102.55278399999997,
title: "Mexico",
description: "I'm number 2"
}, {
lat: 36.778261,
lon: -119.41793239999998,
title: "California",
description: "I'm number 3"
}];
var myOptions = {
zoom: 4,
center: new google.maps.LatLng(30.011902, -98.48424649999998),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'), myOptions);
var infowindow = new google.maps.InfoWindow({
content: ''
});
// loop over our array
for (i = 0; i < Locations.length; i++) {
// create a marker
var marker = new google.maps.Marker({
title: Locations[i].title,
position: new google.maps.LatLng(Locations[i].lat, Locations[i].lon),
map: map
});
// add an event listener for this marker
bindInfoWindow(marker, map, infowindow, "<p>" + Locations[i].description + "</p>");
}
aleatorio(0, 2);
function aleatorio(min, max) {
myrand = Math.floor(Math.random() * (max - min + 1) + min);
map.setCenter({
lat: Locations[myrand].lat,
lng: Locations[myrand].lon
});
return Math.floor(Math.random() * (max - min + 1) + min);
}
}
function bindInfoWindow(marker, map, infowindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(html);
infowindow.open(map, marker);
//alert("seleccionado el "+html);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map-canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas"></div>
I have created the following code based on the tutorial :http://webdesignerwall.com/tutorials/interactive-world-javascript-map.
This is the link to the source code of html file https://gist.github.com/anonymous/84795387d09fe08ee8b6
I have alterate it to display radomly one dot at the time on the map. But what I want to do is to have the dots displayed with a "pulse" effect. Originally the dots are displayed in the correct location, but when I added the following to class to activate the pulse effect the location of the circles changed...I've tried to change the scale but still does not work.. when I removed the scale then it stopped "pulsing". Do you have any ideas on the matter?
$( document ).ready(function() {
//Load the map after the page loads
if (window.addEventListener){ // W3C standard
window.addEventListener('load', function(){worldmap()}, false); //true means that this request will be ignored if auto is set to off
}
else if (window.attachEvent){ // Microsoft
window.attachEvent('onload', function(){worldmap()});
}
function worldmap(){
image_array=[];
var div = document.getElementById('map');
var width=div.offsetWidth;
var scale=width/887;
var height=width*.62;
var paper = Raphael(div, width, height); //create the Raphael canvas in the map div
var background=paper.rect(0, 0, width, height); //create the background
background.attr({fill: ' rgba(32, 32, 32, 1)', 'stroke-width': 0});
//create the map
var map_path="m 267.53333,537.24584 c -0.6,-0.6 -1,...couldn't put the whole path due to charecter limitation";
var map=paper.path(map_path).attr({fill: '#483D8B', stroke: 'white'}).scale(scale, scale, 0, 0);
//create set of locations
var location_set=paper.set();
//create locations
for (var location in locations){
var loc=locations[location];
var xy=get_xy(loc.lat, loc.lng);
var loc_obj=paper.circle(xy.x, xy.y, 7).attr({fill: loc.color, stroke: 'white', 'stroke-width': 2, }).scale(scale, scale, 0, 0);
loc_obj.node.setAttribute("id","i"+location)
loc_obj.node.setAttribute("class","loader")
loc_obj.hide();
loc_obj.name=loc.name;
loc_obj.x=xy.x;
loc_obj.y=xy.y;
location_set.push(loc_obj);
}
var name = document.getElementById('location_name');
// *********************************************Functions *********************************************
function get_xy(lat, lng){ //http://stackoverflow.com/questions/14329691/covert-latitude-longitude-point-to-a-pixels-x-y-on-mercator-projection
var mapWidth=2058;
var mapHeight=1746;
var factor=.404;
var x_adj=-391;
var y_adj=37;
// get x value
var x = (mapWidth*(180+lng)/360)%mapWidth+(mapWidth/2);
//convert from degrees to radians
var latRad = lat*Math.PI/180;
// get y value
var mercN = Math.log(Math.tan((Math.PI/4)+(latRad/2)));
var y = (mapHeight/2)-(mapWidth*mercN/(2*Math.PI));
return { x: x*factor+x_adj, y: y*factor+y_adj}
}
function GetLocationsLength(location){
function ObjectLength( location ) {
var length = 0;
for( var key in location ) {
if( location.hasOwnProperty(key) ) {
++length;
}
}
return length;
};
l=ObjectLength( location );
RandomGenerator(l,locations,location_set);
} //end of selfinvoked Random_Generator
GetLocationsLength(locations)
function RandomGenerator(length,locations,location_set){
location_set[0].show(); //console.log(innerHtml);
var counter=0;
var x=0;
previousX=-1;
var refreshId = setInterval( function() {
x = Math.floor((Math.random() * location_set.length) ); //generates a random number between 0-4
if(counter==0)
{location_set[0].show();
previousX=0;
}
counter++;
location_set[previousX].hide();
location_set[x].show();
//add elements to the box
// var flag = locations[x].name.toString();
//$("img#location").attr("src", flag);
$("img#location").css({"width": "40px", "height": "20px"});
$("span#name").text( locations[x].name).show('slow');
var link = locations[x].name.toString();
$("a#instituteLink").attr("href", link);
$("span#instituteLink").text( locations[x].name).show('slow');
previousX=x;
}, 6000); //end of refreshid funvtion
}//end of function RandomGenerator
}// end of world map function
// *********************************************Location Data*********************************************
var locations={
0: {
name: 'Paris',
lat: 48.866666670,
lng: 2.333333333,
color: 'violet',
},
1: {
name: 'Shanghai',
lat: 31.10,
lng: 121.366,
color: 'black',
},
2: {
name: 'New York',
lat: 40.7,
lng: -73.90,
color: 'red',
},
3: {
name: 'Los Angeles',
lat: 34.0,
lng: -118.25,
color: 'purple',
},
4: {
name: 'Cape Town',
lat: -35.916,
lng: 18.36,
color: 'hotpink',
},
5: {
name: 'Santiago',
lat: -33.45,
lng: -70.66,
color: 'blue',
},
6: {
name: 'Cairo',
lat: 30.05,
lng: 31.25,
color: 'green',
},
7: {
name: 'yolo',
lat: 40.05,
lng: 11.25,
color: 'green',
},
8: {
name: 'Singapore',
lat: 1.30,
lng: 103.83,
color: 'orange',
}
}
});
I'm building my first Fusion Tables, and bringing two Fusion Tables into a Google Map - one of polygons and one of points. Instead of displaying the regular info window when you click on a polygon or a point, I want to pull some data in from the Fusion Table, but it's failing to work:
<script>
function initialize() {
var england = new google.maps.LatLng(53.2, -2);
map = new google.maps.Map(document.getElementById('map_canvas'), {
center: england,
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
layer1 = new google.maps.FusionTablesLayer({
query: {select: 'geometry', from: '1HgGUc72F2Wlp6dvy4GWvLyWrl1kC6aJhnM7jPyc'},
styles: [
{ where: "Score = 0", polygonOptions: { fillColor: "#cdcdcd", fillOpacity: 0.3 } },
{ where: "Score = 1", polygonOptions: { fillColor: "#FF0000", fillOpacity: 0.5 } },
{ where: "Score = 2", polygonOptions: { fillColor: "#FF7E00", fillOpacity: 0.5 } },
{ where: "Score = 3", polygonOptions: { fillColor: "#008000", fillOpacity: 0.5 } }],
options: {suppressInfoWindows: true},
map: map,
});
google.maps.event.addListener(layer1, 'click', function(e) {e.infoWindowHtml = "Score" + e.row['Score'].value;}
});
layer2 = new google.maps.FusionTablesLayer({
query: {select: 'postcode', from: '1bawAKwQAUGE4mzYSyw4lTbOcgp7MgIGOLROel8Y'},
options: {suppressInfoWindows: true},
map: map,
});
google.maps.event.addListener(layer2, 'click', function(e) {e.infoWindowHtml = "Postcode" + e.row['Postcode'].value;}
});
google.maps.event.addDomListener(window, 'load', initialize);
}
</script>
</head>
<body onLoad="initialize()">
<div id="map_canvas"></div>
</body>
</html>
It was all working well, infowindows suppressed, until I added the AddListener and addDomListeners. Can anyone help me get back on track, please?
You have syntax errors in your "new" code (two extra "}")
You have your call to addDomListener inside your initialize function (shouldn't matter as you still have it in the <body tag, but you really shouldn't have it both places.
<script>
function initialize() {
var england = new google.maps.LatLng(53.2, -2);
map = new google.maps.Map(document.getElementById('map_canvas'), {
center: england,
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
layer1 = new google.maps.FusionTablesLayer({
query: {select: 'geometry', from: '1HgGUc72F2Wlp6dvy4GWvLyWrl1kC6aJhnM7jPyc'},
styles: [
{ where: "Score = 0", polygonOptions: { fillColor: "#cdcdcd", fillOpacity: 0.3 } },
{ where: "Score = 1", polygonOptions: { fillColor: "#FF0000", fillOpacity: 0.5 } },
{ where: "Score = 2", polygonOptions: { fillColor: "#FF7E00", fillOpacity: 0.5 } },
{ where: "Score = 3", polygonOptions: { fillColor: "#008000", fillOpacity: 0.5 } }],
options: {suppressInfoWindows: true},
map: map,
});
google.maps.event.addListener(layer1, 'click', function(e) {e.infoWindowHtml = "Score" + e.row['Score'].value;});
layer2 = new google.maps.FusionTablesLayer({
query: {select: 'postcode', from: '1bawAKwQAUGE4mzYSyw4lTbOcgp7MgIGOLROel8Y'},
options: {suppressInfoWindows: true},
map: map,
});
google.maps.event.addListener(layer2, 'click', function(e) {e.infoWindowHtml = "Postcode" + e.row['Postcode'].value;});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map_canvas"></div>
</body>
</html>
working example
modified to make the infowindows from each layer work, using this function:
function openIW(FTevent) {
// infoWindow.setContent(FTevent.infoWindowHtml);
// infoWindow.setPosition(FTevent.latLng);
infoWindow.setOptions(
{
content: FTevent.infoWindowHtml,
position: FTevent.latLng,
pixelOffset: FTevent.pixelOffset
});
infoWindow.open(map);
}
google.maps.event.addListener(layer, 'click', function(e) {
console.log("E.Row! : "+ e.row['name'].value);
});