2

Create and edit popup marker in google map v3

create and edit popup marker google map v3
In google map v3, we can create a popup like above. The popup in google map v3 is called ‘info window‘. So in this tutorial you will learn how to create info window and how to edit too.

Requirement :
1) jquery.js
2) google-map.js

– CREATE MARKER AND INFO WINDOW

1) First, copy the following script to create marker and info window :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
var map;	
var marker_name = 'null';

/**
* FIRST LOAD THE MAP
*/
function initialize() {
	
	// SETUP LOCATION MAP
	var mapOptions = {
		zoom: 13,
		center: new google.maps.LatLng(-6.2858667, 106.8719382)
	};
	map = new google.maps.Map(document.getElementById('map-canvas'),
	  mapOptions);
  
	// CREATE MARKER BY CLICK/TAP ON MAP
	google.maps.event.addListener(map, 'click', function(event) 
	{
		// nothing marker
		if( marker_name == 'null' ){
			marker_name = 'a';
		}else{
			marker_name = String.fromCharCode( marker_name.charCodeAt(0) + 1 ); // a + 1 = b
		}
						
		// add parameter marker
		icons = 'http://maps.google.com/mapfiles/ms/icons/green-dot.png';
		var location = event.latLng;
		window['marker_' + marker_name] = new google.maps.Marker({
			position: location,
			map: map,
			icon: icons,
			draggable: true,
			title: '' + marker_name,
		});
		
		// id marker
		var marker = window['marker_' + marker_name];
		
		// event popup to show marker name
		var content = "<span class='destination_name' onclick='edit_marker_name(\"" + marker_name + "\", this)'>" + marker_name + "</span>";
		var infowindow = new google.maps.InfoWindow();			
		google.maps.event.addListener(marker,'click', (function(marker,content,infowindow){ 
			return function() {
				infowindow.setContent(content);
				infowindow.open(map,marker);
			};
		})(marker,content,infowindow));

	});	// end click map
}	

// LOAD GOOGLE MAPS V3
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas" style="width: 80%; height: 90%;"></div>
</body>

Run that script, and then we can create any marker by clicking on the map.
marker and info window google maps v3

– EDIT INFO WINDOW

– To create editable infowindow, we must adding the script below :

/**
* EDIT MARKER NAME
* @param a char (a,b,c,d ..), thiis <span> of marker name
*/
function edit_marker_name(a, thiis){
	
	// show prompt dialog to edit marker name
	var edit_marker_name = prompt("Edit marker name", $(thiis).html());

	// id marker
	marker = window['marker_' + a];
	
	// update marker name
	if(edit_marker_name)
	{
		// update destination_name by live
		$(thiis).html(edit_marker_name);
		
		// update title marker
		marker.setTitle(edit_marker_name);

		// remove previously event click infowindow
		google.maps.event.clearListeners(marker, 'click');
		
		// popup marker name
		var content = "<span class='destination_name' onclick='edit_marker_name(\"" + a + "\", this)'>" + edit_marker_name + "</span>";
		var infowindow = new google.maps.InfoWindow();			
		google.maps.event.addListener(marker,'click', (function(marker,content,infowindow){ 
			return function() {
				infowindow.setContent(content);
				infowindow.open(map,marker);
			};
		})(marker,content,infowindow)); 
	}
}

So, the full script is like this :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
var map;	
var marker_name = 'null';

/**
* EDIT MARKER NAME
* @param a char (a,b,c,d ..), thiis <span> of marker name
*/
function edit_marker_name(a, thiis){
	
	// show prompt dialog to edit marker name
	var edit_marker_name = prompt("Edit marker name", $(thiis).html());

	// id marker
	marker = window['marker_' + a];
	
	// update marker name
	if(edit_marker_name)
	{
		// update destination_name by live
		$(thiis).html(edit_marker_name);
		
		// update title marker
		marker.setTitle(edit_marker_name);

		// remove previously event click infowindow
		google.maps.event.clearListeners(marker, 'click');
		
		// popup marker name
		var content = "<span class='destination_name' onclick='edit_marker_name(\"" + a + "\", this)'>" + edit_marker_name + "</span>";
		var infowindow = new google.maps.InfoWindow();			
		google.maps.event.addListener(marker,'click', (function(marker,content,infowindow){ 
			return function() {
				infowindow.setContent(content);
				infowindow.open(map,marker);
			};
		})(marker,content,infowindow)); 
	}
}


/**
* FIRST LOAD THE MAP
*/
function initialize() {
	
	// SETUP LOCATION MAP
	var mapOptions = {
		zoom: 13,
		center: new google.maps.LatLng(-6.2858667, 106.8719382)
	};
	map = new google.maps.Map(document.getElementById('map-canvas'),
	  mapOptions);
  
	// CREATE MARKER BY CLICK/TAP ON MAP
	google.maps.event.addListener(map, 'click', function(event) 
	{
		// nothing marker
		if( marker_name == 'null' ){
			marker_name = 'a';
		}else{
			marker_name = String.fromCharCode( marker_name.charCodeAt(0) + 1 ); // a + 1 = b
		}
						
		// add parameter marker
		icons = 'http://maps.google.com/mapfiles/ms/icons/green-dot.png';
		var location = event.latLng;
		window['marker_' + marker_name] = new google.maps.Marker({
			position: location,
			map: map,
			icon: icons,
			draggable: true,
			title: '' + marker_name,
		});
		
		// id marker
		var marker = window['marker_' + marker_name];
		
		// event popup to show marker name
		var content = "<span class='destination_name' onclick='edit_marker_name(\"" + marker_name + "\", this)'>" + marker_name + "</span>";
		var infowindow = new google.maps.InfoWindow();			
		google.maps.event.addListener(marker,'click', (function(marker,content,infowindow){ 
			return function() {
				infowindow.setContent(content);
				infowindow.open(map,marker);
			};
		})(marker,content,infowindow));

	});	// end click map
}	

// LOAD GOOGLE MAPS V3
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas" style="width: 80%; height: 90%;"></div>
</body>

You can edit the marker name by clicking on popup :
edit marker popup google map v3

After edited, your marker name has been changed, like this :
edit marker name success google map v3

You can try demo here

Ambar Hasbiyatmoko

Hello, I'm web developer. Passionate about programming, web server, and networking.

2 Comments

  1. mas agar bisa naruh link di infowindow bagaimana caranya?
    jadi setelah popup infowindow muncul teks info kalau di klik nge-link ke website tertentu.
    terima kasih

    • script terakhir, line 82 :
      var content = “<a href=”http://linknya”>link</a>”;

Leave a Reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload the CAPTCHA.