0

この地図でhttp://goo.gl/EcyxOr のような情報バブルを作成するにはどうすればよいですか。
このマップは問題なく動作します。マーカーに別のウィンドウ (インフォバブル) を配置するだけ
です。これは非常に簡単だと思います
。

var side_bar_html = ""; 

var gmarkers = []; 
var map = null;

function initialize() {
// create the map
var myOptions = {
zoom: 8,
center: new google.maps.LatLng(-27.421409,-61.936722),
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP,
}
map = new google.maps.Map(document.getElementById("map"),
                            myOptions);

google.maps.event.addListener(map, 'click', function() {
    infowindow.close();
    });

//creates the marker

//marker 1
var point = new google.maps.LatLng(-27.421409,-61.936722);
var marker = createMarker(point,"Celta",contentString0,celta(),nonPartShadow)

//marker2
var point = new google.maps.LatLng(-28.421409,-51.224562);
var marker = createMarker(point,"Celta2",contentString1,celta2(),partShadow)

document.getElementById("side_bar").innerHTML = side_bar_html;
}

var infowindow = new google.maps.InfoWindow(
{ 
size: new google.maps.Size(150,50)
});

function myclick(i) {
google.maps.event.trigger(gmarkers[i], "click");
}

function createMarker(latlng, title, html, icon, shadow) {
var contentString = html;

var marker = new google.maps.Marker({
    position: latlng,
    map: map,
    icon: icon,
title: title,
shadow: shadow
    });

google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent(contentString); 
    infowindow.open(map,marker);
    });

gmarkers.push(marker);

side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + name + '<\/a><br>';
}
4

1 に答える 1

1

例は、 Mike Williams の v2 チュートリアルの私の翻訳版に基づいています (これは、コードが元のように見える場所です)。

実施例

コード：

<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
    <title>Google Maps Javascript API v3 Example: Adding a clickable sidebar</title> 
    <style type="text/css">
      body {
        font-size: 83%;
      }

      body, input, textarea {
        font-family: arial, sans-serif;
      }

      #map {
        width: 600px;
        height: 500px;
      }

      #styles, #add-tab {
        float: left;
        margin-top: 10px;
        width: 400px;
      }

      #styles label,
      #add-tab label {
        display: inline-block;
        width: 130px;
      }

      .phoney {
        background: -webkit-gradient(linear,left top,left bottom,color-stop(0, rgb(112,112,112)),color-stop(0.51, rgb(94,94,94)),color-stop(0.52, rgb(57,57,57)));
        background: -moz-linear-gradient(center top,rgb(112,112,112) 0%,rgb(94,94,94) 51%,rgb(57,57,57) 52%);
      }

      .phoneytext {
        text-shadow: 0 -1px 0 #000;
        color: #fff;
        font-family: Helvetica Neue, Helvetica, arial;
        font-size: 18px;
        line-height: 25px;
        padding: 4px 45px 4px 15px;
        font-weight: bold;
        background: url(../images/arrow.png) 95% 50% no-repeat;
      }

      .phoneytab {
        text-shadow: 0 -1px 0 #000;
        color: #fff;
        font-family: Helvetica Neue, Helvetica, arial;
        font-size: 18px;
        background: rgb(112,112,112) !important;
      }
    </style>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobubble/src/infobubble.js"></script>
<script type="text/javascript"> 
    //<![CDATA[ 
      // this variable will collect the html which will eventually be placed in the side_bar 
      var side_bar_html = ""; 

      // arrays to hold copies of the markers and html used by the side_bar 
      // because the function closure trick doesnt work there 
      var gmarkers = []; 
      var map = null;

// A function to create the marker and set up the event window function 
function createMarker(latlng, name, html) {
    var contentString = html;
    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        zIndex: Math.round(latlng.lat()*-100000)<<5
        });

    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent( '<div class="phoneytext">'+contentString+'<div>'); 
        infowindow.open(map,marker);
        });
    // save the info we need to use later for the side_bar
    gmarkers.push(marker);
    // add a line to the side_bar html
    side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + name + '<\/a><br>';
}

function initialize() {
  // create the map
  var myOptions = {
    zoom: 8,
    center: new google.maps.LatLng(43.907787,-79.359741),
    mapTypeControl: true,
    mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
    navigationControl: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map = new google.maps.Map(document.getElementById("map_canvas"),
                                myOptions);

  google.maps.event.addListener(map, 'click', function() {
        infowindow.close();
        });

  // Add markers to the map
  // Set up three markers with info windows 
  // add the points    
  var point = new google.maps.LatLng(43.65654,-79.90138);
  var marker = createMarker(point,"This place","Some stuff to display in the First Info Window")

  var point = new google.maps.LatLng(43.91892,-78.89231);
  var marker = createMarker(point,"That place","Some stuff to display in the Second Info Window")

  var point = new google.maps.LatLng(43.82589,-78.89231);
  var marker = createMarker(point,"The other place","Some stuff to display in the Third Info Window")

  // put the assembled side_bar_html contents into the side_bar div
  document.getElementById("side_bar").innerHTML = side_bar_html;
}

var infowindow = new InfoBubble(
  { 
          map: map,
          content: '<div class="phoneytext">Some label</div>',
          position: new google.maps.LatLng(-35, 151),
          shadowStyle: 1,
          padding: 0,
          backgroundColor: 'lightblue',
          borderRadius: 4,
          arrowSize: 10,
          borderWidth: 1,
          borderColor: '#2c2c2c',
          disableAutoPan: false,
          hideCloseButton: true,
          arrowPosition: 30,
          backgroundClassName: 'phoney',
          arrowStyle: 2,
          maxWidth: 300
  });

// This function picks up the click and opens the corresponding info window
function myclick(i) {
  google.maps.event.trigger(gmarkers[i], "click");
}


    // This Javascript is based on code provided by the
    // Community Church Javascript Team
    // http://www.bisphamchurch.org.uk/   
    // http://econym.org.uk/gmap/
    // from the v2 tutorial page at:
    // http://econym.org.uk/gmap/basic2.htm 
    //]]>

</script> 

  </head> 
<body style="margin:0px; padding:0px;" onload="initialize()"> 

    <!-- you can use tables or divs for the overall layout --> 
    <table border=1> 
      <tr> 
        <td> 
           <div id="map_canvas" style="width: 550px; height: 450px"></div> 
        </td> 
        <td width = 150 valign="top" style="text-decoration: underline; color: #4444ff;"> 
           <div id="side_bar"></div> 
        </td> 
      </tr> 
    </table> 
  </body> 
</html>
于 2013-08-06T03:11:25.553 に答える