4

I have the following code which shows a customers postcode, 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 clicked on, is a popup bubble which the customers order information. What do I need to add to the above, to dispaly the popup bubble?

2 Answers 2

5

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

Pretty much does what you want, that is, it displays a balloon with some content.

What you would need to add to your code is the following:

At the beginning of your script as a global variable:

var infowindow;

At the map api initialization:

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

After the creation of 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

0

You need to read up here...

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

I believe the basic principle is

var marker = new google.maps.Marker({
    position: myLatlng,
    title:"Hello World!"
});
1
  • this is for a small title thingy...what I need is the big speech bubble that pops up when clicked on. Jan 15, 2013 at 11:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.