Google Maps API integration - Click function for map markers, causing headache_问答_开发者

Google Maps API integration - Click function for map markers, causing headache

开发者 https://www.devze.com 2023-01-08 02:34 出处：网络

I am \'trying\' to get the markers on my Google Maps to activate and display some information when clicked.

I am 'trying' to get the markers on my Google Maps to activate and display some information when clicked.

Problem is that somewhere along the way my markers have disappeared (or at least aren't being plotted) and I'm getting some weird warnings about code coming from Google when I examine for breakpoints using Firebug...

Fairly straight forward, I've followed this article: http://www.googlemapsbook.com/2007/03/06/clickable-labeledmarker/

and have even gone as far as to almost co开发者_运维问答mpletely mimic the example code supplied in an effort to get this to work... All to no avail.

Unfortunately, I do not have a live version I can show you as I'm currently doing this portion of the testing offline. But hopefully the following Pastebin will be enough for someone with experience dealing with the GMaps API to pick the flaw(s) in my logic.

http://pastebin.com/wDY3DLtA

Let me know if you need any further information.

Any help with this matter will be greatly appreciated,

Here is an example that adds listeners to the markers, and pops up information when they are clicked. This was my answer to some other question: How could i show info window for ten markers in google maps?, but I think it should help you.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>boats</title>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
<script type="text/javascript">
</script>
</head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var infowindow = null;
var map = null;
function initialize() {
    var washington = new google.maps.LatLng(47.7435, -122.1750);
    var myOptions = {
        zoom: 7,
        center: washington,
        mapTypeId: google.maps.MapTypeId.TERRAIN
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    google.maps.event.addListener(map, 'click', function() {
    infowindow.close();
    });
    infowindow = new google.maps.InfoWindow({ content: "loading..." });
    boats(map, seller);
}

var seller = [
['joe boat', 48.0350,-122.2570, 4, 'This is in good shape.'],
['bobs boat', 48.7435, -122.1750, 2, 'This is in bad shape.'],
['bubas boat', 47.3435, -122.1750, 1, 'This is in ok shape'],
['daveys boat', 47.7435, -122.1750, 3, 'dont buy this one.']
];

function boats(map, markers) {

    for (var i = 0; i < markers.length; i++) {
        var seller = markers[i];
        content_string = '<div style="width: 210px; padding-right: 10px" lang="ko" xml:lang="ko">(&#44396;&#44208;/&#21475;&#35363;)' + seller[0] + '<br>' + seller[1] + '<br>' + seller[4] + '</div>';
        var sellerLatLng = new google.maps.LatLng(seller[1], seller[2]);
        var marker = new google.maps.Marker({
            position: sellerLatLng,
            map: map,
            title: seller[0],
            zIndex: seller[3],
            html: content_string
        });
        var contentString = "content";
        google.maps.event.addListener(marker, "click", function () {

            infowindow.setContent(this.html);
            infowindow.open(map, this);
        });
    }

}
</script>
<body onLoad="initialize()">
<div id="map_canvas" style="width: 450px; height: 350px;">map div</div>
<div lang="it" xml:lang="it">Ciao bella!</div>
<div lang='ko' xml:lang='ko'>??/??</div>
</body>
</html>