javascript - Displaying a popup balloon on a google maps marker - Stack Overflow

admin管理员组

文章数量:1290440

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 = '.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?

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./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?

• javascript
• php
• google-maps

Share Improve this question Follow edited Dec 30, 2013 at 4:51 Kara 6,2261616 gold badges5353 silver badges5858 bronze badges asked Jan 14, 2013 at 15:22 Robert MartensRobert Martens 17344 gold badges55 silver badges1414 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

Check out the InfoWindow overlay: https://developers.google./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

You need to read up here...

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

I believe the basic principle is

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

本文标签： javascriptDisplaying a popup balloon on a google maps markerStack Overflow