If i want to move the marker and i click "YES" in confirmation alert the marker will move to dragend position but i have problem when i click "NO" in confirmation alert. the marker should move to dragstart position but in current code the marker stay in dragend position not in dragstart position. anyone please help me. thankyou
<!DOCTYPE html>
<html>
<body>
<p><span id="start"></span></p>
<p><span id="end"></span></p>
<div id="map" style="width:100%;height:500px"></div>
<script>
function initMap() {
var theLat = 51.508742;
var theLng = -0.120850;
var displayMap = document.getElementById("map");
var myLatlng = new google.maps.LatLng(theLat, theLng);
var myOptions = {
zoom: 5,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(displayMap, myOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
draggable: true
});
google.maps.event.addListener(marker, 'dragend', function() {
if (confirm("Are You Sure You Want To Move this marker?")) {
var positionStartLatNew = this.position.lat();
var positionStartLngNew = this.position.lng();
document.getElementById('end').innerHTML = "Lat end : " + positionStartLatNew + ", " + "Lng end : " + positionStartLngNew;
} else {
google.maps.event.addListener(marker, 'dragstart', function() {
var positionStartLat = this.position.lat();
var positionStartLng = this.position.lng();
document.getElementById('start').innerHTML = "Lat start : " + positionStartLat + ", " + "Lng start : " + positionStartLng;
});
}
});
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDuDtGMwgHfy9Nb07ARmHlsT-Zen228uK4&callback=initMap"></script>
</body>
</html>
Save the position in an accessible scope on dragstart. Use that position to revert the marker when the confirm dialog is cancelled:
var positionStart, positionStartNew;
google.maps.event.addListener(marker, 'dragstart', function() {
positionStart = this.position;
document.getElementById('start').innerHTML = "start position: " + positionStart.toUrlValue(6);
});
google.maps.event.addListener(marker, 'dragend', function() {
if (confirm("Are You Sure You Want To Move this marker?")) {
positionStartNew = this.position;
document.getElementById('end').innerHTML = "end position: " + positionStartNew.toUrlValue(6);
} else {
marker.setPosition(positionStart);
}
});
proof of concept fiddle
code snippet:
function initMap() {
var theLat = 51.508742;
var theLng = -0.120850;
var displayMap = document.getElementById("map");
var myLatlng = new google.maps.LatLng(theLat, theLng);
var myOptions = {
zoom: 5,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(displayMap, myOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
draggable: true
});
var positionStart, positionStartNew;
google.maps.event.addListener(marker, 'dragstart', function() {
positionStart = this.position;
document.getElementById('start').innerHTML = "start position: " + positionStart.toUrlValue(6);
});
google.maps.event.addListener(marker, 'dragend', function() {
if (confirm("Are You Sure You Want To Move this marker?")) {
positionStartNew = this.position;
document.getElementById('end').innerHTML = "end position: " + positionStartNew.toUrlValue(6);
} else {
marker.setPosition(positionStart);
}
});
}
google.maps.event.addDomListener(window, "load", initMap);
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
background-color: white;
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="start"></div>
<div id="end"></div>
<div id="map"></div>
Based on my understanding, this is a possible solution:
google.maps.event.addListener(marker, 'dragend', function() {
if (confirm("Are You Sure You Want To Move this marker?")) {
var positionStartLatNew = this.position.lat();
var positionStartLngNew = this.position.lng();
document.getElementById('end').innerHTML = "Lat end : " +
positionStartLatNew + ", " + "Lng end : " + positionStartLngNew;
} else {
marker.setPosition(myLatlng);
}
});
Just change the code inside the else block so that the marker moves back to the original latLng position.
This is a JSBIN example
Related
I'm trying to increase page speed by loading my Google Maps two seconds after page load. While doing so, I keep on getting "Cannot read property 'extend' of undefined". I know there is some asynchronous loading going on but I'm not sure how to get it in proper order to get this map to load 2 seconds after the page is done. Any help is greatly appreciated.
Page Code:
<div id="mapCont"></div>
<script defer type='text/javascript' src='/js/maps.js'></script>
maps.js
$(window).bind("load", function() {
$.getScript('https://maps.googleapis.com/maps/api/js?key=key', function()
{
setTimeout(function(){
function doMap(callback) {
$("#mapCont").html('<div id="mapInfoManual" class="searchMap mb5"></div>');
callback();
}
doMap(function() {
initialize();
var map = null;
var markers = [];
var openedInfoWindow ="";
var bounds = new google.maps.LatLngBounds();
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(64.85599578876611, -147.83363628361917),
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
}
};
map = new google.maps.Map(document.getElementById("mapInfoManual"),
mapOptions);
google.maps.event.addListener(map, 'zoom_changed', function() {
zoomChangeBoundsListener = google.maps.event.addListener(map, 'bounds_changed', function(event) {
if (this.getZoom() > 20) // Change max/min zoom here
this.setZoom(18);
google.maps.event.removeListener(zoomChangeBoundsListener);
});
});
addMarker();
}
function addMarker() {
var bounds = new google.maps.LatLngBounds();
for (i = 0; i < markersArray.length; i++) {
CodeAddress(markersArray[i]);
}
}
// Address To Marker
function CodeAddress(markerEntry) {
var mytitle = (markersArray[i]['title']);
var myaddress = (markersArray[i]['address']);
var linkid = (markersArray[i]['linkid']);
var linkurl = (markersArray[i]['linkurl']);
var image = { url: '/images/MapPin.png', };
var lat = markerEntry['lat'];
var long = markerEntry['long'];
// var myLatLng = {lat: markerEntry['lat'], lng: markerEntry['long']};
var myLatlng = new google.maps.LatLng(parseFloat(lat),parseFloat(long));
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
icon: image
});
bounds.extend(marker.getPosition());
var infoWindowContent = "<div class='cityMapInfoPop'><span style='font-weight:700;'>"+ mytitle +"</span><br /><br />" + myaddress + "<br /><br /><a href='/center/" + linkurl + "/'>More Details</a></div>";
openInfoWindow(marker, infoWindowContent);
markers.push(marker);
map.fitBounds(bounds);
}
//Info Window
function openInfoWindow(marker, infoWindowContent) {
var infowindow = new google.maps.InfoWindow({
content: '<div class="cityMapInfoPop">' + infoWindowContent + '</div>'
});
google.maps.event.addListener(marker, 'click', function() {
if (openedInfoWindow != "") {
openedInfoWindow.close();
}
infowindow.open(map, marker);
openedInfoWindow = infowindow;
});
}
});
}, 2000);
});
});
The initial https://maps.googleapis.com/maps/api/js?key=key loads additional scripts that are not being captured by your implementation. The package, https://www.npmjs.com/package/#googlemaps/js-api-loader, enables the following pattern and is probably what you want:
import { Loader } from '#googlemaps/js-api-loader';
const loader = new Loader({
apiKey: "",
version: "weekly",
libraries: ["places"]
});
loader
.load()
.then(() => {
doMap();
initialize();
})
.catch(e => {
// do something
});
Alternative(use callback) if you want JQuery and your existing pattern:
window.callback = () => {
doMap();
initialize();
};
$(window).bind("load", function() {
$.getScript('https://maps.googleapis.com/maps/api/js?key=key&callback=callback', () => {}); // do nothing here
Also related: https://developers.google.com/maps/documentation/javascript/examples/programmatic-load-button
I have multiple markers on the map that I have imported from JSON. Inside the marker infowindow I have a button and when clicking on that, I want to change the marker image. Please check my code below. Marker list and Infowindow is working fine. I just want to do some actions on the button that is inside infowindow.
var workerlist;
var jobprice;
var price;
var map;
var list;
var position;
var image;
var image1;
var marker;
function myMap() {
var mapProp= {
center:new google.maps.LatLng(30.7333,76.7794),
zoom:10,
disableDefaultUI: true
};
map = new google.maps.Map(document.getElementById("map"),mapProp);
image = 'images/blue_marker1.png';
image1 = 'images/pink_marker1.png';
console.log(workerlist);
for (var i = 0; i < workerlist.length; i++) {
list = workerlist[i];
price = jobprice;
position = new google.maps.LatLng(list.latitude,list.longitude);
addMarker(map,list,price,position,marker);
}
}
function addMarker(map,list,price,position,marker){
marker = new google.maps.Marker({
position: position,
title: list.name,
map: map,
icon: image
});
var contentString = '<div class="mapBox">'+
'<div class="content"> <h3>'+ list.name +
'</h3>'+
'<h6>(2.1 miles from the job venue)</h6>' +
'<div class="rating"></div>'+
'<p>Total cost to hire:</p>'+
'<p>Rate: $' + price.Price + ' per hour</p>'+
'<p>Total Cost: $'+ price.total_amount +'</p>'+
'</div><button id="shortList" class="btn btn-shortlist" onclick="shortList()">Shortlist for the JOb</button>'+
'</div>';
marker.addListener('click', function() {
if (typeof infowindow != 'undefined') infowindow.close();
infowindow = new google.maps.InfoWindow({
content: contentString,
})
infowindow.open(map,marker)
$("#shortList").click(function(){
image = 'images/pink_marker1.png';
});
});
}
function shortList(){
// alert('clicked');
// infowindow.close();
//marker.setIcon(image1);
}
Before you can access the <button id="shortList"> in the DOM with JQuery, it needs to be added to the DOM. That happens asynchronously when the InfoWindow content is rendered, the domready event on the InfoWindow fires when it is available.
google.maps.event.addListener(infowindow, 'domready', function() {
$("#shortList").click(function() {
// code here to change the icon
});
});
related question: How to detect button click in googlemaps infowindow
If you want the icon of the marker to change, you need to call .setIcon on the marker:
marker.addListener('click', function() {
if (typeof infowindow != 'undefined') infowindow.close();
infowindow = new google.maps.InfoWindow({
content: contentString,
})
infowindow.open(map, marker)
var that = this; // save reference to marker to change its icon
google.maps.event.addListener(infowindow, 'domready', function() {
$("#shortList").click(function() {
image = 'http://maps.google.com/mapfiles/ms/micons/orange.png';
that.setIcon(image);
});
});
});
proof of concept fiddle
code snippet:
var workerlist;
var jobprice = {
Price: "$10",
total_amount: "$100"
};
var price;
var map;
var list;
var position;
var image;
var image1;
var marker;
workerlist = [{
name: "Chandigarth",
latitude: 30.7333,
longitude: 76.7794
},
{
name: "Chandigarth2",
latitude: 30.7,
longitude: 76.7
}
]
function myMap() {
var mapProp = {
center: new google.maps.LatLng(30.7333, 76.7794),
zoom: 10,
disableDefaultUI: true
};
map = new google.maps.Map(document.getElementById("map"), mapProp);
image = 'http://maps.google.com/mapfiles/ms/micons/blue.png';
image1 = 'http://maps.google.com/mapfiles/ms/micons/orange.png';
console.log(workerlist);
for (var i = 0; i < workerlist.length; i++) {
list = workerlist[i];
price = jobprice;
position = new google.maps.LatLng(list.latitude, list.longitude);
addMarker(map, list, price, position, marker);
}
}
function addMarker(map, list, price, position, marker) {
marker = new google.maps.Marker({
position: position,
title: list.name,
map: map,
icon: image
});
var contentString = '<div class="mapBox">' +
'<div class="content"> <h3>' + list.name +
'</h3>' +
'<h6>(2.1 miles from the job venue)</h6>' +
'<div class="rating"></div>' +
'<p>Total cost to hire:</p>' +
'<p>Rate: $' + price.Price + ' per hour</p>' +
'<p>Total Cost: $' + price.total_amount + '</p>' +
'</div><button id="shortList" class="btn btn-shortlist" onclick="shortList()">Shortlist for the JOb</button>' +
'</div>';
marker.addListener('click', function() {
if (typeof infowindow != 'undefined') infowindow.close();
infowindow = new google.maps.InfoWindow({
content: contentString,
})
infowindow.open(map, marker)
var that = this;
google.maps.event.addListener(infowindow, 'domready', function() {
$("#shortList").click(function() {
image = 'http://maps.google.com/mapfiles/ms/micons/orange.png';
that.setIcon(image);
});
});
});
}
function shortList() {
// alert('clicked');
// infowindow.close();
//marker.setIcon(image1);
}
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Info Windows</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=myMap&libraries=&v=weekly" defer></script>
<!-- jsFiddle will insert css and js -->
</head>
<body>
<div id="map"></div>
</body>
</html>
I'm using the Google Maps API to capture the zoom level when the user clicks on the map. I would then like to increase the zoom level by 1, but I'm having trouble doing this and I'm getting multiple console.log entries when I run this in the browser.
Here's the script in question:
var map = null;
function initialize() {
var myOptions = {
zoom: 12,
scaleControl: true,
streetViewControl: false,
center: new google.maps.LatLng(-28.8413400, 153.4384050),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map-canvas"),
myOptions);
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
var marker = new google.maps.Marker({
position: new google.maps.LatLng(-28.8413400, 153.4384050),
map: map,
icon: 'https://maps.google.com/mapfiles/ms/icons/blue.png',
title: ''
});
var point = new google.maps.LatLng(-27.7028557, 153.0120736);
var icon = 'https://maps.google.com/mapfiles/ms/icons/red.png';
var marker = createMarker(point, '<p style="font-size:14px">Acme Services 2</p>', icon)
var point = new google.maps.LatLng(-29.8089498, 152.8230076);
var icon = 'https://maps.google.com/mapfiles/ms/icons/red.png';
var marker = createMarker(point, '<p style="font-size:14px">Acme Services 4</p>', icon)
var point = new google.maps.LatLng(-26.6564235, 153.0586826);
var icon = 'https://maps.google.com/mapfiles/ms/icons/red.png';
var marker = createMarker(point, '<p style="font-size:14px">Acme Services 4</p>', icon)
}
var infowindow = new google.maps.InfoWindow({
size: new google.maps.Size(100, 20)
});
function createMarker(latlng, html, icon) {
var contentString = html;
var marker = new google.maps.Marker({
position: latlng,
icon: icon,
map: map,
zIndex: Math.round(latlng.lat() * -100000) << 5
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map, marker);
});
google.maps.event.addListener(map, 'zoom_changed', function() {
var zoomLevel = map.getZoom();
console.log(zoomLevel);
});
google.maps.event.addListener(map, "click", function(event) {
var latitude = event.latLng.lat();
var longitude = event.latLng.lng();
var newCentre = latitude + ', ' + longitude;
var currentZoomLevel = map.getZoom();
console.log("currentZoomLevel: " + currentZoomLevel);
var zoomLevel = parseInt(currentZoomLevel, 10) + 1;
console.log("zoomLevel: " + zoomLevel);
});
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<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>Google Maps Markers</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.33&key=myKeyHere"></script>
<style type="text/css">
html,
body,
#map-canvas {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body style="margin:0px; padding:0px;" onload="initialize()">
<div id="map-canvas"></div>
</body>
</html>
When I look at the console log I can see multiple entries of the following:
[Log] currentZoomLevel: 12
[Log] zoomLevel: 13
It looks like it's generating an entry for each marker that I have on the map. For example if I have 3 markers I'm getting 6 entries in the console.log, but I'm not sure why this is happening?
Simply move your map event listeners outside of your createMarker function.
I also modified:
declared infowindow as a global variable so that it can be accessed in both functions
merged the 2 map click event listeners into one
var map = null;
var infowindow;
function initialize() {
var myOptions = {
zoom: 12,
scaleControl: true,
streetViewControl: false,
center: new google.maps.LatLng(-28.8413400, 153.4384050),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map-canvas"),
myOptions);
infowindow = new google.maps.InfoWindow({
size: new google.maps.Size(100, 20)
});
google.maps.event.addListener(map, 'click', function(event) {
infowindow.close();
var latitude = event.latLng.lat();
var longitude = event.latLng.lng();
var newCentre = latitude + ', ' + longitude;
var currentZoomLevel = map.getZoom();
console.log("currentZoomLevel: " + currentZoomLevel);
var zoomLevel = parseInt(currentZoomLevel, 10) + 1;
console.log("zoomLevel: " + zoomLevel);
});
google.maps.event.addListener(map, 'zoom_changed', function() {
var zoomLevel = map.getZoom();
console.log(zoomLevel);
});
var marker = new google.maps.Marker({
position: new google.maps.LatLng(-28.8413400, 153.4384050),
map: map,
icon: 'https://maps.google.com/mapfiles/ms/icons/blue.png',
title: ''
});
var point = new google.maps.LatLng(-27.7028557, 153.0120736);
var icon = 'https://maps.google.com/mapfiles/ms/icons/red.png';
var marker = createMarker(point, '<p style="font-size:14px">Acme Services 2</p>', icon)
var point = new google.maps.LatLng(-29.8089498, 152.8230076);
var icon = 'https://maps.google.com/mapfiles/ms/icons/red.png';
var marker = createMarker(point, '<p style="font-size:14px">Acme Services 4</p>', icon)
var point = new google.maps.LatLng(-26.6564235, 153.0586826);
var icon = 'https://maps.google.com/mapfiles/ms/icons/red.png';
var marker = createMarker(point, '<p style="font-size:14px">Acme Services 4</p>', icon)
}
function createMarker(latlng, html, icon) {
var contentString = html;
var marker = new google.maps.Marker({
position: latlng,
icon: icon,
map: map,
zIndex: Math.round(latlng.lat() * -100000) << 5
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map, marker);
});
}
initialize();
#map-canvas {
height: 200px;
}
<div id="map-canvas"></div>
<script src="https://maps.googleapis.com/maps/api/js"></script>
I want to disable a marker when it is clicked so that the message is not repeated .
http://code.google.com/apis/maps/documentation/v3/reference.html#Marker
I found this method setClickable in another similar question but it only makes the marker disappear, it doesn't disable it.
<!DOCTYPE html>
<html>
<head>
#map {
height: 50%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<div id="box"></div>
<script>
function initMap() {
var myLatlng = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: myLatlng
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Click to zoom'
});
marker.addListener('click', function() {
var box = document.getElementById("box");
var para = document.createElement("p");
var node = document.createTextNode("Paragrap ")
para.appendChild(node);
box.appendChild(para);
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB_nzqNDBfJopGdzH2sNBbgHS-iotxkN_c&callback=initMap">
</script>
</body>
</html>
https://codepen.io/anon/pen/ejLJOg
from the documentation:
Removing Event Listeners
To remove a specific event listener, it must have been assigned to a variable. You can then call removeListener(), passing the variable name to which the listener was assigned.
var listener1 = marker.addListener('click', aFunction);
google.maps.event.removeListener(listener1);
Remove the listener in the eventListener callback function:
var listener = marker.addListener('click', function() {
var box = document.getElementById("box");
var para = document.createElement("p");
var node = document.createTextNode("Paragrap ")
para.appendChild(node);
box.appendChild(para);
google.maps.event.removeListener(listener);
});
code snippet:
#map {
height: 50%;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
<div id="map"></div>
<div id="box"></div>
<script>
function initMap() {
var myLatlng = {
lat: -25.363,
lng: 131.044
};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: myLatlng
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Click to zoom'
});
var listener = marker.addListener('click', function() {
var box = document.getElementById("box");
var para = document.createElement("p");
var node = document.createTextNode("Paragrap ")
para.appendChild(node);
box.appendChild(para);
google.maps.event.removeListener(listener);
});
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap">
</script>
I'de like to have all Markers set when initializing
the page and when the mouse is out of the div. When the mouse is on one of the div, the Marker related to this div remains and the other ones are removed until mouseleave.
So I tried to remove all markers with setMapOnAll(null) and add the one specific to the div on mouseover, and then reset all markers on mouseleave.
But I cant make the Markers disappear.
Javascript:
<script>
var infoWindow = new google.maps.InfoWindow();
function initialize() {
var map = new google.maps.Map(
document.getElementById("map"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var name = "name1";
var address = "address 1";
var condition = "true";
var point = new google.maps.LatLng(42, -72);
var html = "<b>" + name + "</b> <br/>" + address;
var i = 0;
createMarker(point, condition,html, i, map);
point = new google.maps.LatLng(42.02, -72.02);
name = "name2";
address = "address 2";
html = "<b>" + name + "</b> <br/>" + address;
condition = "false";
i++;
var marker = createMarker(point, condition, html, i, map);
map.setCenter(marker.getPosition());
}
function createMarker(point, condition, html, i, map) {
var marker = new google.maps.Marker({
map: map,
position: point,
draggable: true
});
var activeIcon, idleIcon;
if (condition == "true") {
idleIcon = 'http://labs.google.com/ridefinder/images/mm_20_blue.png';
} else {
idleIcon = 'http://labs.google.com/ridefinder/images/mm_20_red.png';
}
marker.setIcon(idleIcon);
var elem = document.getElementById('a' + i);
if (!!elem) {
elem.onmouseover = function() {
setMapOnAll(marker, null);
marker.setIcon(idleIcon);
}
elem.onmouseleave = function() {
setMapOnAll(marker, map);
}
}
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
return marker;
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
function setMapOnAll(marker, map) {
for (var i = 0; i < marker.length; i++) {
marker[i].setMap(map);
}
}
}
google.maps.event.addDomListener(window, "load", initialize);
</script>
html:
<div id="a0">marker 1</div>
<div id="a1">marker 2</div>
<div id="map"></div>
CSS:
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
Just change the example in that question to set the map property of the marker on mouseover of the external div, and set it back to null on mouseleave.
code snippet:
function createMarker(point, icon, html, i, map) {
var marker = new google.maps.Marker({
position: point,
draggable: true
});
marker.setIcon(icon);
var elem = document.getElementById('a' + i);
if (!!elem) {
elem.onmouseover = function() {
marker.setMap(map);
}
elem.onmouseleave = function() {
marker.setMap(null);
}
document.getElementById('a' + i).onclick = (function(marker) {
return function() {
google.maps.event.trigger(marker, 'click');
}
})(marker);
}
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
markers.push(marker);
return marker;
}
var infoWindow = new google.maps.InfoWindow();
var markers = [];
var map;
function initialize() {
map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var name = "name1";
var address = "address 1";
var point = new google.maps.LatLng(42, -72);
var html = "<b>" + name + "</b> <br/>" + address;
var i = 0;
createMarker(point, 'http://labs.google.com/ridefinder/images/mm_20_blue.png', html, i, map);
point = new google.maps.LatLng(42.02, -72.02);
name = "name2";
address = "address 2";
html = "<b>" + name + "</b> <br/>" + address;
i++;
var marker = createMarker(point, 'http://labs.google.com/ridefinder/images/mm_20_green.png', html, i, map);
point = new google.maps.LatLng(42.01, -72.01);
name = "name3";
address = "address 3";
html = "<b>" + name + "</b> <br/>" + address;
i++;
var marker = createMarker(point, 'http://labs.google.com/ridefinder/images/mm_20_red.png', html, i, map);
map.setCenter(marker.getPosition());
}
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="a0">marker 1</div>
<div id="a1">marker 2</div>
<div id="a2">marker 3</div>
<div id="map_canvas"></div>