I am trying to create a map dialog which allows the user to select his or her desired location.
I have a working example located at http://jsfiddle.net/HCUPa/1/, and the source code is below.
When the infowindow is closed (by clicking the X on the infowindow), how do I remove the associated marker? Do I then need to remove the infowindows name from the array, and if so, how?
Also, when the map (or dialog and then the map) is closed, how do I detect it being closed, and should I be cleaning up any resources, and if so what and how?
I attempted to use addListeners for both as shown in my example, but it isn’t working.
Lastly, not really my formal question, but I would appreciate any advise whether I am generally doing this correct. This was my first attempt of the Google map api, and I am still a JavaScript novice, and would appreciate any suggestions, criticize, etc.
Thank you
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
#googleMap { height: 100%;width: 100%;}
div.modify-title-bar div.ui-dialog-titlebar {border:0;background-image:none;background-color:transparent;padding:0;margin:0;}
#dialog-map,div.modify-title-bar {padding:0;margin:0;}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link type="text/css" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false"></script>
<script type="text/javascript">
function createMap(geocoder,myCenter,address) {
var map = new google.maps.Map(document.getElementById("googleMap"),{center:myCenter,zoom:5,mapTypeId:google.maps.MapTypeId.ROADMAP});
var marker = new google.maps.Marker({position: myCenter,map: map,});
var infowindow = new google.maps.InfoWindow({content: '<span>'+address+'</span><br><button class="accept">Select Address</button>'});
infowindow.open(map,marker);
google.maps.event.addListener(map, 'close', function(event) {
//How do I detect map closing, what and how should I clean up? Maybe move to dialog close?
alert('close map');
delete geocoder,myCenter,address,map,marker,infowindow;
});
google.maps.event.addListener(map, 'click', function(event) {
marker.setMap(null);
marker = new google.maps.Marker({
position: event.latLng,
map: map,
});
geocoder.geocode({location: event.latLng}, function(GeocoderResult, GeocoderStatus) {
infowindow.close();
infowindow = new google.maps.InfoWindow({content: '<span>'+GeocoderResult[0].formatted_address+'</span><br><button class="accept">Select Address</button>'});
infowindow.open(map,marker);
});
google.maps.event.addListener(infowindow,'closeclick',function(){
//How do I detect if infowindow is closed? Do I then need to remove the infowindows name from the array, and if so, how?
alert('Remove marker');
marker.setMap(null);
});
});
}
$(function(){
$("#googleMap").on("click", "button.accept", function(){
$('#address').val($(this).parent().children('span').eq(0).text());
$("#dialog-map").dialog('close');
});
$("#findIt").click(function(){$("#dialog-map").dialog("open");return false;});
$("#dialog-map").dialog({
autoOpen : false,
resizable : false,
height : 500,
width : 800,
modal : true,
dialogClass : 'modify-title-bar',
open : function() {
var address=$.trim($('#address').val()),
geocoder=new google.maps.Geocoder,
LatLng,
//Default LatLng
Ya=47.6204901, Za=-122.34964839999998,
//Give default address to limit geocoder calls
default_address='400 Broad Street, Seattle, WA 98109, USA';
if(address) {
geocoder.geocode({address: address}, function(GeocoderResult, GeocoderStatus) {
if (GeocoderStatus=='OK') {
LatLng=GeocoderResult[0].geometry.location;
}
else {
LatLng=new google.maps.LatLng(Ya,Za);
adderss=default_address;
}
createMap(geocoder,LatLng,address);
});
}
else {
LatLng=new google.maps.LatLng(Ya,Za);
createMap(geocoder,LatLng,default_address);
}
}
});
});
</script>
</head>
<body>
<button id="findIt">Find it on a map</button>
<input id="address" type="text" value="1600 Pennsylvania Avenue Northwest Washington, DC">
<div id="dialog-map" title="Select a location">
<div id="googleMap"></div>
</div>
</body>
</html>
Create a new function that listens for the infowindow close event
Call that everytime you create a new infowindow.
Working Demo
You are doing well for your first time using the API. If you want more than one marker and infobox then you will need to make a few changes, otherwise it’s fine.