I'm trying to get each marker to direct to the url when clicked. Markers are dropped sequentially on the map and immediately settle after a brief bouncing animation. However, clicking each marker returns "webpage not found"? I don't see why this is the case since each url was saved in the mapUrl array variable. If an explict url is used, it works i.e
window.location.href = 'www.amazon.com';
But I have multiple markers, so I need the script to read the urls stored in the mapUrl array. This was suggested:
google.maps.event.addListener(marker, 'click', function () {
document.getElementById('goToLocation').innerHTML = 'Will send you to ' + this.url;
});
But the syntax after the equal sign doesn't work i.e. the this.url part.
Here's my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Marker animations with <code>setTimeout()</code>
</title>
<style>
html,
body,
#map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
#panel {
position: absolute;
top: 5px;
left: 50%;
margin-left: -180px;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false" type="text/javascript"></script>
<div id="panel">
<button id="drop" onclick="drop()">Drop Markers</button>
</div>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false" type="text/javascript"></script>
</head>
<body onload="initialize()" ;>
<div id="map-canvas"></div>
<script>
var sacramento = new google.maps.LatLng(38.576725, -121.493715);
var neighborhoods = [
new google.maps.LatLng(38.576725, -121.493715),
new google.maps.LatLng(35.011263, -115.473376),
new google.maps.LatLng(33.941820, -118.408466)
];
var markers = [];
var map;
var mapUrl = [
'http://www.google.com',
'http://www.youtube.com',
'http://maps.amazon.com'
];
function initialize() {
var mapOptions = {
zoom: 5,
center: sacramento
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
drop();
}
function drop() {
for (var i = 0; i < neighborhoods.length; i++) {
addMarker(i);
}
}
function addMarker(iterator) {
var marker = new google.maps.Marker({
position: neighborhoods[iterator],
map: map,
draggable: false,
url: mapUrl[iterator],
animation: google.maps.Animation.DROP
});
google.maps.event.addListener(marker, 'click', function () {
window.location.href = markers.mapUrl;
});
google.maps.event.addListener(marker, 'click', toggleBounce);
markers.push(marker);
}
function toggleBounce() {
if (markers.getAnimation() != null) {
markers.setAnimation(null);
} else {
markers.setAnimation(google.maps.Animation.BOUNCE);
}
}
</script>
</body>
</html>
Your code is a bit confusing, but I think you were pretty close to what you were trying to do.
google.maps.event.addListener(marker, 'click', function () {
window.location.href = markers.mapUrl;;
});
Should be:
google.maps.event.addListener(marker, 'click', function () {
window.location.href = this.url;
});
And since clicking on a marker is redirecting the page, the second click handler that calls toggleBounce is not used/needed. Here's a cleaned up and working version based on what it seemed you're trying to do. Also moved that div from the head to the body and removed the extra import of the maps API.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Marker animations with 'setTimeout()'
</title>
<style>
html,
body,
#map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
#panel {
position: absolute;
top: 5px;
left: 50%;
margin-left: -180px;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false" type="text/javascript"></script>
</head>
<body onload="initialize()" ;>
<div id="map-canvas"></div>
<div id="panel">
<button id="drop" onclick="drop()">Drop Markers</button>
</div>
<script>
var sacramento = new google.maps.LatLng(38.576725, -121.493715);
var neighborhoods = [
new google.maps.LatLng(38.576725, -121.493715),
new google.maps.LatLng(35.011263, -115.473376),
new google.maps.LatLng(33.941820, -118.408466)
];
var markers = [];
var map;
var mapUrl = [
'http://www.google.com',
'http://www.youtube.com',
'http://maps.amazon.com'
];
function initialize() {
var mapOptions = {
zoom: 5,
center: sacramento
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
drop();
}
function drop() {
for (var i = 0; i < neighborhoods.length; i++) {
addMarker(i);
}
}
function addMarker(iterator) {
var marker = new google.maps.Marker({
position: neighborhoods[iterator],
map: map,
draggable: false,
url: mapUrl[iterator],
animation: google.maps.Animation.DROP
});
google.maps.event.addListener(marker, 'click', function () {
window.location.href = this.url;
});
markers.push(marker);
}
</script>
</body>
</html>
Related
I am using MarkerClustererPlus library in an AngularJS project with ngMap. I attached mouseover and mouseout event to MarkerClusterer object. When mouse is hovered over the cluster I am displaying all individual marker's detail in single InfoWindow of that cluster. Whenever user's mouse is out from cluster I want to hide the InfoWindow. Now the functionality works partially correct. When the mouse is put on the count of cluster, the mouseover and mouseout events are being called consecutively, due to that the InfoWindow get visible/hide and it creates a flickering effect. Am I missing anything in my code to eliminate that flicker?
I am giving you the both examples. On is in plain JavaScript and other is in AngularJs with ngMap. Also attached the video which shows the issue I am facing.
Thanks!
ngMap + MarkerClusterPlus + InfoWindow + MouseOver + MouseOut = InfoWindow Flickering Issue
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Dynamic ngMap demo</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script src="https://maps.google.com/maps/api/js?libraries=placeses,visualization,drawing,geometry,places"></script>
<script src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
<script src="https://cdn.rawgit.com/mahnunchik/markerclustererplus/master/dist/markerclusterer.min.js"></script>
<script>
MarkerClusterer.prototype.MARKER_CLUSTER_IMAGE_PATH_
= 'https://raw.githubusercontent.com/googlemaps/js-marker-clusterer/gh-pages/images/m'; //changed image path
</script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/testapp/scripts/markers.js"></script>
<script>
var app = angular.module('myApp', ['ngMap']);
app.controller('mapController', function($http, $interval, NgMap) {
var vm = this;
vm.dynMarkers = [];
NgMap.getMap().then(function(map) {
vm.map = map;
for (var i=0; i<1000; i++) {
var latLng = new google.maps.LatLng(markers[i].position[0], markers[i].position[1]);
vm.dynMarkers.push(new google.maps.Marker({position:latLng}));
}
vm.markerClusterer = new MarkerClusterer(map, vm.dynMarkers, {imagePath: 'https://raw.githubusercontent.com/googlemaps/js-marker-clusterer/gh-pages/images/m'});
google.maps.event.addListener(vm.markerClusterer, 'mouseover', function(cluster) {
vm.map.showInfoWindow('bar', cluster.getCenter());
});
google.maps.event.addListener(vm.markerClusterer, 'mouseout', function() {
vm.map.hideInfoWindow('bar');
});
});
});
</script>
<style>
map, div[map] {display:block; width:600px; height:400px;}
</style>
</head>
<body>
<h1>Marker Cluster</h1>
<hr />
<div ng-controller="mapController as vm">
<ng-map zoom="2" center="[43.6650000, -79.4103000]" style="display:block; width:600px; height:400px;">
<info-window id="bar" max-width="200">
<div ng-non-bindable>
<div id="bodyContent">
<p>
<b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large
sandstone rock formation in the southern part of the
Northern Territory, central Australia.</p>
</div>
</div>
</info-window>
</ng-map>
</div>
</body>
</html>
https://plnkr.co/edit/4Yl8avzyKEgtEYvffIM7?p=preview
https://www.useloom.com/share/0e183dee979e4accb90887ba3d9ba59a
Plain JavaScript + MarkerClusterPlus + InfoWindow + MouseOver + MouseOut = InfoWindow Flickering Issue
<!DOCTYPE>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>MarkerClustererPlus V3 Example</title>
<style type="text/css">
.photo {
box-shadow : 0 0 10px rgba(0, 0, 0, 0.8);
}
.photo-thumblist {
display : inline-block;
margin : -1px 2px;
padding : 0;
position : relative;
}
.photo-longlist {
background-color : #f1f1f1;
border-top : 1px solid #d1d1d1;
border-bottom : 1px solid #d1d1d1;
height : 75px;
overflow : auto;
padding : 7px 7px;
}
.photo-preview {
background-color : #222222;
height : 150px;
width : 100%;
}
.photo-googlemaps {
background-color : #222222;
border : 1px solid #222222;
height : 300px;
width : 100%;
}
.photo-map {
background-color : #222222;
height : 500px;
width : 100%;
}
.photo-map-overlay {
background-color : rgba(255, 255, 255, 0.8);
display : none;
margin : -501px 0 0 1px;
height : 420px;
overflow : auto;
padding : 40px 50px;
position : absolute;
width : 100%;
}
.photo-map-overlayclose {
display : none;
margin : 0 0 0 10px;
position : absolute;
z-index : 100;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://cdn.rawgit.com/mahnunchik/markerclustererplus/master/dist/markerclusterer.min.js"></script>
<script type="text/javascript">
var marker;
var gm_map;
var markerArray = [];
var address = 'Sweden';
var geocoder = new google.maps.Geocoder();
var infoWindow = new google.maps.InfoWindow();
geocoder.geocode({ 'address': address }, function(results, status) {
if(status == google.maps.GeocoderStatus.OK) {
// gm_map.setCenter(results[0].geometry.location);
// gm_map.fitBounds(results[0].geometry.bounds);
} else {
alert("Unable to complete the geological setting due to the following error:\n\n" + status);
}
});
function initialize() {
var marker, i;
var clusterMarkers = [
new google.maps.Marker({
position: new google.maps.LatLng(59.381059,13.504026),
map: gm_map,
title:"P1220214 1.JPG"
}),
new google.maps.Marker({
position: new google.maps.LatLng(59.338683,13.492057),
map: gm_map,
title:"P1220214 2.JPG"
}),
new google.maps.Marker({
position: new google.maps.LatLng(59.340715,13.49631),
map: gm_map,
title:"P1220214 3.JPG"
}),
new google.maps.Marker({
position: new google.maps.LatLng(59.327232,13.487384),
map: gm_map,
title:"P1220214 4.JPG"
}),
new google.maps.Marker({
position: new google.maps.LatLng(59.379034,13.516566),
map: gm_map,
title:"P1220214 5.JPG"
}),
new google.maps.Marker({
position: new google.maps.LatLng(59.328631,13.485688),
map: gm_map,
title:"P1220214 6.JPG"
}),
new google.maps.Marker({
position: new google.maps.LatLng(59.328657,13.485591),
map: gm_map,
title:"P1220214 7.JPG"
}),
new google.maps.Marker({
position: new google.maps.LatLng(59.328501,13.485782),
map: gm_map,
title:"P1220214 8.JPG"
})
]
var options_googlemaps = {
minZoom: 4,
zoom: 18,
center: new google.maps.LatLng(59.328631,13.485688),
maxZoom: 18,
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: false
}
gm_map = new google.maps.Map(document.getElementById('google-maps'), options_googlemaps);
var options_markerclusterer = {
gridSize: 20,
maxZoom: 18,
zoomOnClick: false,
imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
};
var markerCluster = new MarkerClusterer(gm_map, clusterMarkers, options_markerclusterer);
google.maps.event.addListener(markerCluster, 'mouseover', function(cluster) {
var markers = cluster.getMarkers();
var array = [];
var num = 0;
for(i = 0; i < markers.length; i++) {
num++;
array.push(markers[i].getTitle() + '<br>');
}
if (gm_map.getZoom() <= markerCluster.getMaxZoom()) {
infoWindow.setContent(markers.length + " markers<br>"+array);
infoWindow.setPosition(cluster.getCenter());
infoWindow.open(gm_map);
}
});
google.maps.event.addListener(markerCluster, 'mouseout', function() {
infoWindow.close();
});
for(i = 0; i < clusterMarkers.length; i++) {
var marker = clusterMarkers[i];
google.maps.event.addListener(marker, 'click', (function(marker) {
return function() {
infoWindow.setContent(this.getTitle());
infoWindow.open(gm_map, this);
}
})(marker));
}
}
$(document).ready(function() {
// INITIALIZE GOOGLE MAPS
initialize();
// CLOSE
$('body').on('click', '#close-link', function() {
$('#toggle-photolist').fadeOut();
$('#close-overlay').fadeOut();
});
});
</script>
</head>
<body>
<div class="photo-map-overlayclose" id="close-overlay">
Close
</div>
<div class="photo-map" id="google-maps"></div>
<center class="photo-map-overlay" id="toggle-photolist">
<div id="view-singlephoto"></div>
<div id="view-multiblephotos">
<div class="color-miniheadline paddingbottom-5 paddingleft-5" style="text-align: left;">
The following photos was found in a total of <span id="count-photos">0</span>
</div>
<div style="text-align: left;">
<div id="list-photos"></div>
</div>
</div>
</center>
</body>
</html>
http://jsfiddle.net/2onvfwdy/89/
https://www.useloom.com/share/9927951ace714557a3e8d803c96d073f
Use this while creating infowindow, it will create a little gap between the icon and infowindow
pixelOffset: new google.maps.Size(0, -5)
I tried to make google maps for cities in jordan that will Show information about the city to the user when the marker clicked
My problem is When I tried to get the Marker that been clicked by the user ,it always send the last marker in the For-loop that instantiate the markers and give the information
The for-loop works will and Give each marker it's own title,label and give an event listener for each marker
How can I get the clicked marker ?
<!DOCTYPE html>
<html>
<head>
<title>Gis Map</title>
<style>
.background {} p {
background-color: white;
}
span {
color: blue;
}
#Footer {
width: 100%;
height: 30px;
position: relative;
left: 0px;
bottom: 0px;
}
#Footer_text {
padding: 10px;
color: black;
background-color: #5B1B14;
}
#Fixed {
position: fixed;
top: 0px;
left: 0px;
height: 70px;
width: 100%;
z-index: 3;
background-color: #5B1B14;
}
#Fixed_img_c {
width: 20%;
height: 100%;
margin: 0 auto;
}
#Fixed_img {
height: 100%;
}
.paragraphs {
text-align: center;
z-index: 1;
font-size: 20px;
width: 100%;
color: red;
}
/*************************Menu*****************************/
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0px;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s
}
.sidenav a:hover,
.offcanvas a:focus {
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
</style>
</head>
<body>
<div id="Fixed">
<div id="Fixed_img_c">
</div>
</div>
<script>
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
</script>
<div class="container">
<div id="mySidenav" class="sidenav">
×
Something
Something
</div>
<div id="map" style="width:100%;height:500px"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(
document.getElementById('map'), {
zoom: 7,
center: new google.maps.LatLng(31.9, 35.8),
mapTypeId: 'terrain'
});
//jordan cities locations
var locations = [
[31.8354533, 35.9674337],
[31.186446, 35.6248844],
[30.8071736, 35.5228078],
[32.0522945, 35.9935951],
[31.7157524, 35.7633807],
[32.0321557, 35.655972],
[32.3402518, 36.1527321],
[32.2699656, 35.824437],
[32.3415654, 35.7322292],
[32.5525113, 35.81239],
[30.2200923, 35.5467541],
[29.5909744, 35.1750487]
]
var info = [
["Amman", 4.007256],
["Al_Karak", 316.629],
["Tafilah", 96.291],
["Zarqa ", 1.364878],
["Madaba ", 189.192],
["Balqa ", 491.709],
["Mafraq ", 549.948],
["Jerash ", 237.059],
["Ajloun ", 176.080],
["Irbid ", 1.770158],
["Ma'an", 144.083],
["Aqaba ", 188.160]
]
var markers = new Array();
for (var i = 0; i < locations.length; i++) {
var coords = locations[i];
var latLng = new google.maps.LatLng(coords[0], coords[1]);
var marker = new google.maps.Marker({
position: latLng,
map: map,
label: info[i][0],
title: info[i][0]
});
var infowindow = new google.maps.InfoWindow({
content: info[i][1] + ""
});
google.maps.event.addListener(marker, 'click', function() {
openNav();
//changeText();
infowindow.open(map, marker);
});
google.maps.event.addListener(map, 'click', function() {
closeNav()
});
}
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAZInPKXBMPYpDNRGJwjGqJb6MRGog_haU&libraries=visualization&callback=initMap">
</script>
<div id="Footer">
<p id="Footer_text" class="paragraphs">dufault</p>
</div>
</div>
</body>
</html>
You need to associate the infowindow with the correct marker. One solution to that is function closure as demonstrated in the similar question: Google Maps JS API v3 - Simple Multiple Marker Example. For your code:
google.maps.event.addListener(marker, 'click', function(marker,i) {
return function() {
openNav();
//changeText();
// set the infowindow content for this marker (the function has closure on i)
infowindow.setContent(info[i][1]+"");
// open the infowindow on this marker (the function has closure on marker)
infowindow.open(map, marker);
}}(marker,i));
proof of concept fiddle
code snippet:
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
var map;
function initMap() {
map = new google.maps.Map(
document.getElementById('map'), {
zoom: 7,
center: new google.maps.LatLng(31.9, 35.8),
mapTypeId: 'terrain'
});
//jordan cities locations
var locations = [
[31.8354533, 35.9674337],
[31.186446, 35.6248844],
[30.8071736, 35.5228078],
[32.0522945, 35.9935951],
[31.7157524, 35.7633807],
[32.0321557, 35.655972],
[32.3402518, 36.1527321],
[32.2699656, 35.824437],
[32.3415654, 35.7322292],
[32.5525113, 35.81239],
[30.2200923, 35.5467541],
[29.5909744, 35.1750487]
]
var info = [
["Amman", 4.007256],
["Al_Karak", 316.629],
["Tafilah", 96.291],
["Zarqa ", 1.364878],
["Madaba ", 189.192],
["Balqa ", 491.709],
["Mafraq ", 549.948],
["Jerash ", 237.059],
["Ajloun ", 176.080],
["Irbid ", 1.770158],
["Ma'an", 144.083],
["Aqaba ", 188.160]
]
var markers = new Array();
for (var i = 0; i < locations.length; i++) {
var coords = locations[i];
var latLng = new google.maps.LatLng(coords[0], coords[1]);
var marker = new google.maps.Marker({
position: latLng,
map: map,
label: info[i][0],
title: info[i][0]
});
var infowindow = new google.maps.InfoWindow({
content: info[i][1] + ""
});
google.maps.event.addListener(marker, 'click', function(marker, i) {
return function() {
openNav();
//changeText();
infowindow.setContent(info[i][1] + "");
infowindow.open(map, marker);
}
}(marker, i));
google.maps.event.addListener(map, 'click', function() {
closeNav()
});
}
}
google.maps.event.addDomListener(window, 'load', initMap);
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="Fixed">
<div id="Fixed_img_c">
</div>
</div>
<div class="container">
<div id="mySidenav" class="sidenav">
×
Something
Something
</div>
<div id="map" style="width:100%;height:500px"></div>
<div id="Footer">
<p id="Footer_text" class="paragraphs">dufault</p>
</div>
Try placing the listener in a function and pass the value you need
var myFunctinForListener = function(aMarker, aInfoWindow) {
google.maps.event.addListener(aMarker, 'click', function() {
openNav();
//changeText();
aInfoWindow.open(map, aMarker);
});
}
....
for (var i = 0; i < locations.length; i++) {
var coords = locations[i];
var latLng = new google.maps.LatLng(coords[0], coords[1]);
var marker = new google.maps.Marker({
position: latLng,
map: map,
label: info[i][0],
title: info[i][0]
});
var infowindow = new google.maps.InfoWindow({
content: info[i][1] + ""
});
myFunctinForListener(marker, inforwinodow);
.....
i just stuck in a problem with google-map multi marker script, i have multiple markers and when i clink on the external link for location the map zoomed in specific google lat, lon .
but if you can see i have info box on every marker.if i click on the map marker it open the info box. but when i click on external zoom link it didn't display the info box of marker.
can anyone help me in this matter. please check the example in below link
http://saudisoftechportal.us/map.html
The problem is, when you click the external link, the resetMap method pans to the required LatLng and zooms to the given zoomlevel, but does not open the infowindow at the marker. Maybe you should use a markers array too according to the locations.
Here is a sample for your problem:
<!DOCTYPE html>
<html>
<head>
<title>Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
width: 100%;
height: 400px;
}
.maker{ margin:auto;}
.maker li{ list-style:none; float:left; width:100%; margin-bottom:8px;}
.maker li img{ width:34px; height:34px; display:block; float:left;}
.maker li span{ display: block; float: left; line-height: 27px; font-weight: bold; margin-left: 10px;}
</style>
</head>
<body>
<div id="map"></div>
<div class="span4">
<ul id="markerul" class="maker">
</ul>
</div>
<script type="text/javascript">
var map;
var infowindow;
var marker;
var markers = [];
var locations = [
['<strong>Head Office Khobar</strong>', 26.3411159,50.1936446,'http://downloadicons.net/sites/default/files/map-marker-icons-49653.png',0],
['<strong>Dammam Office</strong>', 26.409727,50.1314224,'http://downloadicons.net/sites/default/files/map-marker-icons-49653.png',1],
['<strong>Khafji Office</strong>', 28.4155603,48.509478,'http://downloadicons.net/sites/default/files/map-marker-icons-49653.png',2],
['<strong>Riyadh Office</strong>', 24.6717577,46.7262669,'http://downloadicons.net/sites/default/files/map-marker-icons-49653.png',3],
['<strong>Jeddah Office</strong>', 21.5228383,39.1793113,'http://downloadicons.net/sites/default/files/map-marker-icons-49653.png',4],
['<strong>Warehouse</strong>', 26.4152548,50.1606446,'http://downloadicons.net/sites/default/files/map-marker-icons-49653.png',5],
['<strong>Workshop</strong>', 26.4146399,50.156845,'http://downloadicons.net/sites/default/files/map-marker-icons-49653.png',6],
['<strong>PMT Office</strong>', 14.576208,120.997944,'http://downloadicons.net/sites/default/files/map-marker-icons-49653.png',7]
];
function initMap(){
map = new google.maps.Map(document.getElementById('map'), {
zoom: 5,
scrollwheel: false,
center: new google.maps.LatLng(23.884248, 45.078492),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
infowindow = new google.maps.InfoWindow();
for (var i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
icon: locations[i][3]
});
markers.push(marker);
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
listFill();
}
function resetMap(elem, zoom) {
var newPos = new google.maps.LatLng(locations[elem][1], locations[elem][2]);
infowindow.setContent(locations[elem][0]);
infowindow.open(map, markers[elem]);
map.setZoom(zoom);
map.panTo(newPos);
};
function listFill(){
$('#markerul ul').html('');
for (var i = 0; i < locations.length; i++) {
var liItem = '<li><img src="' + locations[i][3] + '" alt="' + locations[i][0] + '"/><span>' + locations[i][0] + '</span></li>';
$('#markerul').append(liItem);
};
};
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>
</body>
</html>
I hope it helps!
How can I implement draggable icons markers using this Google Maps Example
So far I have the code below:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Places search box</title>
<style>
html, body, #map-canvas {
height: 93%;
width: 90%;
margin: 10px;
padding: 10px
}
#panel {
position: absolute;
top: 1%;
left: 25%;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
}
#target {
width: 345px;
}
#shelf{position:absolute; top: 0px; left:980px; height:100%;width:30%; float: right; background:white;opacity:0.7;}
#draggable {position:absolute; top:10px; left:10px; width: 30px; height: 30px;z-index:1000000000;}
</style>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#draggable").draggable({helper: 'clone',
stop: function(e) {
var point=new google.maps.Point(e.pageX,e.pageY);
var ll=overlay.getProjection().fromContainerPixelToLatLng(point);
var icon = $(this).attr('src');
placeMarker(ll, icon);
}
});
});
</script>
<script type="text/javascript">
var $map;
var $latlng;
var overlay;
// This example adds a search box to a map, using the
// Google Places autocomplete feature. People can enter geographical searches.
// The search box will return a pick list containing
// a mix of places and predicted search terms.
function initialize() {
var markers = [];
var map = new google.maps.Map(document.getElementById('map-canvas'), {
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var defaultBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(37.3333, -121.9000),
new google.maps.LatLng(37.3333, -121.9000));
map.fitBounds(defaultBounds);
// Create the search box and link it to the UI element.
var input = document.getElementById('target');
var searchBox = new google.maps.places.SearchBox(input);
// [START region_getplaces]
// Listen for the event fired when the user selects an item from the
// pick list. Retrieve the matching places for that item.
google.maps.event.addListener(searchBox, 'places_changed', function() {
var places = searchBox.getPlaces();
for (var i = 0, marker; marker = markers[i]; i++) {
marker.setMap(null);
}
// For each place, get the icon, place name, and location.
markers = [];
var bounds = new google.maps.LatLngBounds();
for (var i = 0, place; place = places[i]; i++) {
var image = {
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(25, 25)
};
// Create a marker for each place.
var marker = new google.maps.Marker({
map: map,
icon: image,
title: place.name,
position: place.geometry.location
});
markers.push(marker);
bounds.extend(place.geometry.location);
}
map.fitBounds(bounds);
});
// [END region_getplaces]
// Bias the SearchBox results towards places that are within the bounds of the
// current map's viewport.
google.maps.event.addListener(map, 'bounds_changed', function() {
var bounds = map.getBounds();
searchBox.setBounds(bounds);
});
overlay = new google.maps.OverlayView();
overlay.draw = function() {};
overlay.setMap($map);
}
function placeMarker(location, icon) {
var marker = new google.maps.Marker({
position: location,
map: map,
draggable:true,
icon: icon
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="shelf">
<img src="https://cdn1.iconfinder.com/data/icons/lightly-icons/30/location.png" id="draggable" title="Estation Trash/Compost" alt="Estation Trash and Compost"/>
</div>
<div id="map-canvas"></div>
<div id="panel">
<input id="target" type="text" placeholder="Search Box">
</div>
</body>
</html>
If you load up the code, you will notice that the icon can be dragged only once. Also, when I try to drag the icon ONTO the map, the icon is dragged BEHIND the map and can not be seen. Any suggestions on what I am doing wrong? I have a feeling this piece of code is part of the problem...
function placeMarker(location, icon) {
var marker = new google.maps.Marker({
position: location,
map: map,
draggable:true,
icon: icon
});
}
Let me know.
NOTE: Below is the map that works with a draggable icon, BUT I want to implement this same method onto the search map that I have above. Thus, I am trying to combine the draggable function from the map below onto the search map above that I got from the Google Map Example
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Demo Map</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
html {
height: 100%
}
body {
height: 100%;
margin: 0px;
padding: 0px;
}
#map_canvas {
width: 70%;
height: 100%;
}
#shelf{position:absolute; top: 0px; left:980px; height:100%;width:30%; float: right; background:white;opacity:0.7;}
#draggable {position:absolute; top:10px; left:10px; width: 30px; height: 30px;z-index:1000000000;}
</style>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#draggable").draggable({helper: 'clone',
stop: function(e) {
var point=new google.maps.Point(e.pageX,e.pageY);
var ll=overlay.getProjection().fromContainerPixelToLatLng(point);
var icon = $(this).attr('src');
placeMarker(ll, icon);
}
});
});
</script>
<script type="text/javascript">
var $map;
var $latlng;
var overlay;
function initialize() {
var $latlng = new google.maps.LatLng(37.32758, -121.89246);
var myOptions = {
zoom: 19,
center: $latlng,
mapTypeId: google.maps.MapTypeId.SATELLITE,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
position: google.maps.ControlPosition.TOP_LEFT },
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE,
position: google.maps.ControlPosition.LEFT_TOP
},
scaleControl: true,
scaleControlOptions: {
position: google.maps.ControlPosition.TOP_LEFT
},
streetViewControl: false,
panControl:false,
};
$map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
overlay = new google.maps.OverlayView();
overlay.draw = function() {};
overlay.setMap($map);
}
function placeMarker(location, icon) {
var marker = new google.maps.Marker({
position: location,
map: $map,
draggable:true,
icon: icon
});
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
<div id='shelf'>
<img src="https://cdn1.iconfinder.com/data/icons/lightly-icons/30/location.png" id="draggable" title="Estation Trash/Compost" alt="Estation Trash and Compost"/>
</div>
</body>
</html>
I'm close but any ideas on what's wrong?
There are 2 tricks to avoid dragging behind the map. On the draggable item use these options:
helper: "clone",
appendTo: "body"
By appending to body, the cloned helper will be the newest item created, and will be on top of the map.
this is my first post here so I apologize if I make a newbie faux pas.
I've got a Google Fusion Table layer that I have on top of a map. I created it by importing a KML file. Everything works great, but last week I realized that the InfoWindow is now displaying all of the vertices of the relevant polygon in the geometry field.
The strange thing is that these vertices do not display in the actual Fusion Table but only on the layer on top of the map. I suspect something might be going on with the JavaScript code, which I am very new to, or perhaps the new API for the Fusion Tables.
I removed the body section to get around some formatting issues on this page, but here is the code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<title>Georgia Areas</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100%; weight: 100% }
#search-panel {
position: absolute;
` top: 10px;
left: 50%;
margin-left: -180px;
width: 350px;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
}
#address {
width: 345px;
}
#instruction {
position: fixed;
float: right;
bottom: 10px;
right: 20px;
width: 375px;
z-index: 4;
background-color: #fff;
padding: 7px;
border: 1px solid #999;
font-family:"Arial";
}
p.small {font-size: small}
</style>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyARy6zbLmjvq3uaPjI--s45afA0LA-ynnA&sensor=false">
</script>
<script type="text/javascript">
var infoWindow = new google.maps.InfoWindow();
var input = document.getElementById('address');
var geocoder;
var gaCentroid;
var gaBounds;
var myMap;
function myclick(num) {
google.maps.event.trigger(markers[num], "click");
}
function initialize() {
geocoder = new google.maps.Geocoder();
gaCentroid = new google.maps.LatLng(32.900000, -83.22671);
gaBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(30.34,-85.652),
new google.maps.LatLng(35.01,-80.85)
);
var mapOptions = {
center: gaCentroid,
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
myMap = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
var lyr = new google.maps.FusionTablesLayer({
query: {
select: 'geometry',
from: '1Bgo94POIxKwQOOltuFbaAW6CpjQqPvYLVSqXuLk'
},
styles: [{
polygonOptions: {
fillColor: '0xDEEBF7',
fillOpacity: 0.1
}
}]
});
lyr.setMap(myMap);
}
function codeAddress() {
var address = document.getElementById('address').value;
geocoder.geocode({'address':address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
myMap.setCenter(results[0].geometry.location);
myMap.fitBounds(results[0].geometry.viewport)
var marker = new google.maps.Marker({
map: myMap,
position: results[0].geometry.location
});
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
function reCenter() {
var currentCenter = myMap.getCenter();
google.maps.event.trigger(myMap, 'resize');
myMap.setCenter(currentCenter);
}
</script>
</head>
</html>
Can anyone shed some light on this?
Thanks,
Ryan
You can configure the content shown in the infowindow.
See this page in the Fusion Tables Help
You must define the templateId to have the same content for the infoWindow.
Add this to the options passed to the layer:
templateId:2
I ended up changing the code to reference another Fusion Tables Layer. All I changed was the ID. This seems to work with the new layer, but I still do not know what happened to display the geometry in the InfoWindow.
If it happens again, I will most likley attempt Dr.Molle's suggestion.