Displaying a popup on a Google Maps brand

Question

I have the following code that shows the customer’s zip code and marks it on the map with a marker:

<?php if($_GET['postcode']){ ?> //alert(<?php echo $_GET['postcode'];?>) <?php }?> function initialize() { var mapOptions = { zoom: 4, center: new google.maps.LatLng("<?php echo $_GET['postcode'];?>"), mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById('map_canvas'),mapOptions); map.setTilt(45); var addressArray = new Array("<?php echo $_GET['postcode'];?>"); var geocoder = new google.maps.Geocoder(); var markerBounds = new google.maps.LatLngBounds(); for (var i = 0; i < addressArray.length; i++) { geocoder.geocode( { 'address': addressArray[i]}, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { var marker = new google.maps.Marker({ map: map, position: results[0].geometry.location }); markerBounds.extend(results[0].geometry.location); map.fitBounds(markerBounds); } else { alert("Geocode was not successful for the following reason: " + status); } }); } } function loadScript() { var script = document.createElement('script'); script.type = 'text/javascript'; script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&' + 'callback=initialize'; document.body.appendChild(script); } window.onload = loadScript; </script> 

What I need when the marker is pressed is the pop-up bubble that the customer requests. What do I need to add to the above to show a popup?

Answer 1

Check out the InfoWindow overlay: https://developers.google.com/maps/documentation/javascript/overlays#InfoWindows

Quite a lot does what you want, that is, displays a balloon with some content.

What you need to add to your code:

At the beginning of your script as a global variable:

 var infowindow; 

On the initialization of the api map:

 function initialize() { infowindow = new google.maps.InfoWindow(); 

After creating the marker:

 var marker = new google.maps.Marker({ map: map, position: results[0].geometry.location }); google.maps.event.addListener(marker, 'click', function() { infowindow.setContent("<p>Some HTML content</p>"); infowindow.open(map,marker); }); 

Hope this helps you

Answer 2

You need to read here ...

https://developers.google.com/maps/documentation/javascript/overlays

I believe that the basic principle is

 var marker = new google.maps.Marker({ position: myLatlng, title:"Hello World!" });