In Google maps, I want to have buttons that will hide and show map markers, but I need to have multiple buttons, each with their own set of markers. For example, button 1 would show and hide markers 1 and 3, while button 2 would show and hide markers 2 and 4.
It's kinda hard for me cause I'm new in api v3.
Here is my code.
function initialize() {
var mapDiv = document.getElementById('map-canvas');
var map = new google.maps.Map(mapDiv, {
center: new google.maps.LatLng(-8.762472, -63.887951),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP });
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(-8.759662,-63.906489),
icon: predio});
var infowindow = new google.maps.InfoWindow({
content:contentimage})
google.maps.event.addListener(marker,'click',function(){
infowindow.open(map,marker); });
var marker1 = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(-8.766159,-63.889567),
icon: yellow});
var infowindow1 = new google.maps.InfoWindow({
content:contentimage1})
google.maps.event.addListener(marker1,'click',function(){
infowindow1.open(map,marker1); });
}
You may like this
A Working Example Here.
function init()
{
// Icon urls for 4 icons
var bell="http://image1.png", cam="http://image2.png",
black="http://image3.png", green="http://image4.png";
// Image urls for 4 images
conimg1="http://contentImage1.jpg", conimg2="http://contentImage2.jpg",
conimg3="http://contentImage3.jpg", conimg4="http://contentImage4.jpg",
var map,
locations = [
[42.82846160000000000000, -76.53560419999997000000, bell, conimg1],
[43.65162010000000000000, -77.73558579999997000000, black, conimg2],
[44.75846240000000000000, -78.22252100000003000000, cam, conimg3],
[41.71773540000000000000, -75.74897190000002000000, green, conimg4]
],
myOptions = {
zoom: 6,
center: new google.maps.LatLng(locations[0][0], locations[0][1]),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var mapDiv = document.getElementById('map');
map = new google.maps.Map(mapDiv, myOptions);
var infowindow = new google.maps.InfoWindow(), marker, i, markers=[];
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][0], locations[i][1]),
map: map,
icon: locations[i][2],
visible:true
});
markers.push(marker)
google.maps.event.addListener(marker, 'click',(function(marker, i){
return function() {
var img="<img class='contentImage' src='"+locations[i][3]+"' />";
infowindow.setContent(img);
infowindow.open(map, marker);
}
})(marker, i));
}
var btn1=document.getElementById('btn1');
google.maps.event.addDomListener(btn1, 'click', function(){
if(markers[0].visible)
{
this.innerHTML="Show Icons (1 and 2)";
this.className="btn";
markers[0].setVisible(false);
markers[1].setVisible(false);
}
else
{
this.innerHTML="Hide Icons (1 and 2)";
this.className="btn btn-primary";
markers[0].setVisible(true);
markers[1].setVisible(true);
}
});
var btn2=document.getElementById('btn2');
google.maps.event.addDomListener(btn2, 'click', function(){
if(markers[2].visible)
{
this.innerHTML="Show Icons (3 and 4)";
this.className="btn";
markers[2].setVisible(false);
markers[3].setVisible(false);
}
else
{
this.innerHTML="Hide Icons (3 and 4)";
this.className="btn btn-primary";
markers[2].setVisible(true);
markers[3].setVisible(true);
}
});
}
Related
I am loading multiple markers for 2 branches. I am not able to automatically open infowindow on load of the page?
var locations = [
['<strong>Info</strong><br /> Address', 40.004257, -105.253425, 2],
['<strong>Info</strong><br /> Address', 39.999326, -105.257662, 1]
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 14,
center: new google.maps.LatLng(40.00, -105.24),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
icon: "images/favicon.png",
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
Anything wrong with the code? Is there a fix to auto open infowindow?
Here's what I've done to load the infoWindows when you load the page.
function initMap() {
var locations = [
['<strong>Info</strong><br> Address', 40.004257, -105.253425, 2],
['<strong>Info</strong><br> Address', 39.999326, -105.257662, 1]
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 14,
center: new google.maps.LatLng(40.00, -105.24),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
var infowindow = new google.maps.InfoWindow({
content:locations[i][0]
});
infowindow.open(map, marker);
}
}
try adding
infowindow.open(map,marker);
after the for loop.
maybe this one could help.
Google maps open info window by default?
below is my code, where I've created a geolocation marker and a marker which the user can drag around the map.
I'm wondering what I need to do in order to keep the location of the dragged marker, if the user refreshes. Below is my code:
function initialize() {
var locations = [
['Your Hostel Is Here', 54.911615,-1.377025,],
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng(54.911615,-1.377025),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
draggable: true
});
localStorage.setItem('marker', marker);
var retrievedmarker = localStorage.getItem('marker');
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
// Check if user support geo-location
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 = {
zoom: 8,
center: geolocpoint,
mapTypeId: google.maps.MapTypeId.HYBRID
}
// Place a marker
var geolocation = new google.maps.Marker({
position: geolocpoint,
map: map,
title: 'Your geolocation',
icon: 'http://labs.google.com/ridefinder/images/mm_20_green.png'
});
});
}
}
google.maps.event.addDomListener(window, 'load', initialize);
You need to store the lat long value of a marker object in string, rather than the object. Furthermore, your need to listen to the marker mouseup event to store the marker value for later display.
Add this event:
//Record the new marker position
google.maps.event.addListener(marker, 'mouseup', function() {
localStorage.setItem('marker', marker.position.lat() + "," + marker.position.lng());
var retrievedmarker = localStorage.getItem('marker');
});
Edit the following code section:
//Get the last recorded marker position for display
var retrievedmarker = localStorage.getItem('marker');
mylatlng = retrievedmarker.split(",");
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
//position: new google.maps.LatLng(locations[i][1], locations[i][2]),
position: new google.maps.LatLng(mylatlng[0], mylatlng[1]),
map: map,
draggable: true
});
Note: I didn't check for the localStorage key existence, please make sure you check for it before the value retrieval.
I have a problem. I can't put each marker with info windows, neither the description
example:
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Uluru (Ayers Rock)'
https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple
var map
function initialize() {
var centerLatlng = new google.maps.LatLng(38.697476,-9.207047);
var myOptions = {
zoom: 12,
center: centerLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var placescoordjs = {{=XML(response.json(placescoord))}}
var marker, i;
for (i = 0; i < placescoordjs.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(placescoordjs[i][0],placescoordjs[i][1]),
map: map
});
}
}
function mymarker() {
var myLatlng = new google.maps.LatLng({{=coordenadas[0]}},{{=coordenadas[1]}});
var myOptions = {
zoom: 10,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"My Marker!!"
});
map.setCenter(myLatlng);
marker.setMap(map);
}
var infowindow = new google.maps.InfoWindow({
content: "<html>https://pt.wikipedia.org/wiki/Lisboa</html>"
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
I have this code. I have a database that "puts" the markers in the map but how i can add each marker the description and a info windows?
You have to create the infoWindow, and bind it to the marker using google.maps.event.addListener...
it's all in the doc you've posted:
var infowindow = new google.maps.InfoWindow({
content: "<html>your html</html>"
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
try to update your initialize method to something like this:
function initialize() {
var centerLatlng = new google.maps.LatLng(38.697476,-9.207047);
var myOptions = {
zoom: 12,
center: centerLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var placescoordjs = {{=XML(response.json(placescoord))}}
var marker, i;
for (i = 0; i < placescoordjs.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(placescoordjs[i][0],placescoordjs[i][1]),
map: map
});
/* Creates the infowindow */
infowindow = new google.maps.InfoWindow({
content: "<html>your html</html>"
});
/* Bind the infowindow to the marker */
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
}
I have three arrays : myLats, (latitudes) myLngs (longitudes) and myLocs (address strings)
e.g. myLats[0] = 53.3534751, ,myLngs[0] = -2.5682085, myLocs[0] = Longwood Rd Appleton Warrington. So the elements of each array all correspond to each other numerically.
When constructing the map in my initialize() function, I loop through these to place multiple markers at the correct coordinates, and i'm also trying to have each marker having an infowindow appear when clicked, yet when i click a marker an infowindow simply does not appear. Any help with this would be greatly appreciated.
Code:
function initialize() {
var myOptions = {
center: new google.maps.LatLng(54.00366, -2.547855),
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
var marker, infowindow, i;
for (i = 0; i <= myLats.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(myLats[i], myLngs[i]),
map: map,
clickable: true,
icon: '". url::base() ."resources/icons/accident.png',
});
infowindow = new google.maps.InfoWindow({
content: myLocs[i],
});
google.maps.event.addListener(marker, 'click', function () {
infowindow.open(map, marker);
});
}
}
That's a common problem when dealing with more than one marker. You aren't in fact creating a new window for each marker but must redefining the single window for each marker.
You'll find the problem and solution on page 88 onwards of Google Map API V3
If you are new to Google Maps API, I would recommend reading that book, it gave me a great start and I avoided a lot of the "common" mistakes.
Hope this helps.
Jim
I made a few changes, like adding the markers inside a function, adding 'var', and changing i <= myLats.length to i < myLats.length. It was a combination of these changes that made it work.
var myLats = [ 54.20366, 54.42366, 54.64366];
var myLngs = [ -2.54788, -2.66788, -2.78788];
var myLocs = [ "Loc a" , "Loc b" , "Loc c"];
function initialize()
{
var myOptions =
{
center: new google.maps.LatLng(54.00366,-2.547855),
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'),myOptions);
var marker, infowindow, i;
for (i=0; i < myLats.length; i++)
{
addMarker(i);
}
function addMarker(i) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(myLats[i],myLngs[i]),
map: map,
clickable: true,
//icon: '". url::base() ."resources/icons/accident.png',
});
var infowindow = new google.maps.InfoWindow({
content: myLocs[i]
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
}
However, I'm guessing you want a solution that keeps only one infowindow open, I had this figured out first:
var myLats = [ 54.20366, 54.42366, 54.64366];
var myLngs = [ -2.54788, -2.66788, -2.78788];
var myLocs = [ "Loc a" , "Loc b" , "Loc c"];
var map, marker, infowindow, i;
function initialize()
{
var myOptions =
{
center: new google.maps.LatLng(54.00366,-2.547855),
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'),myOptions);
infowindow = new google.maps.InfoWindow({ });
for (i = 0; i < myLats.length; i++) {
addMarker(i);
}
}
function addMarker(i) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(myLats[i],myLngs[i]),
map: map,
clickable: true
//icon: '". url::base() ."resources/icons/accident.png'
});
google.maps.event.addListener(marker, 'click', function(event) {
infowindow.setContent(myLocs[i]);
infowindow.open(map,marker);
});
}
Here is my fiddle link.
I added markers to the maps, also infowindows for every marker.
But only one infowindow appears?
Here you go:
var ships = [['63.44204833', '10.40340333'], ['63.49261667', '9.92661167'], ['63.43243500', '10.37030833'], ['63.43896000', '10.40036167'], ['63.64856000', '10.67950167'], ['63.43330667', '10.36608000'], ['63.43840500', '10.40874000'], ['63.78920833', '11.19232167'], ['63.45155667', '10.20245833'], ['63.43366667', '10.36150000'], ['63.43956667', '10.40019333'], ['63.47066500', '10.33613500'], ['63.43928333', '10.40971667'], ['63.43822000', '10.39873167']];
var map;
var infowindow = new google.maps.InfoWindow({
content: 'bla'
});
var marker;
function initialize() {
var myLatlng = new google.maps.LatLng(63.65, 10.65);
var myOptions = {
zoom: 9,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.TERRAIN
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
function createMarker(lat, lon, html) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, lon),
map: map,
title: html
});
createInfoWindow(marker);
}
function createInfoWindow(m) {
google.maps.event.addListener(m, 'click', function() {
infowindow.open(map, m);
});
}
function processShips(ships) {
for (var i = 0; i < ships.length; i++) {
createMarker(ships[i][0], ships[i][1], 'bla');
}
}
function load(ships) {
initialize();
processShips(ships);
}
load(ships);
Working example.
Simply add var in front of marker in your createMarker function
var marker = new google.maps.Marker({....