Welcome to ShenZhenJia Knowledge Sharing Community for programmer and developer-Open, Learning and Share
menu search
person
editAsk a Question
Welcome To Ask or Share your Answers For Others

Categories

google maps - Display both Markers and Polygon (javascript api v3)

in Technique[技术] by (71.8m points)

I am trying to show markers that fall within a state boundary. I am working with the code provided below (which is working great for the markers) but am having trouble getting it to work when I add to it an array of polygon coordinates for the state boundary polygon. Any help on how to add an array of coordinates for a single polygon would be greatly appreciated. Thank You. 

<html> 
<head> 
<title>Web Map of Offices</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<style type="text/css"> 
html { height: 100% } 
body { height: 100%; margin: 0px; padding: 0px } 
#map_canvas { height: 100% } 
</style> 

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"> 
</script> `enter code here`

<script type="text/javascript">

function initialize() { 
    var myLatlng = new google.maps.LatLng(38.895308,-80.304565);  
    var myOptions = {
    zoom: 8,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
}

    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions) ;

    lats = new Array (38.3213861,38.4579809,38.8014155,38.9875643,38.8022869,39.2844968,39.4850848,39.6078332,39.0194418,38.9399985,40.065598,39.2648469,40.4019707,39.5641071,37.7924745,37.3602823,37.8212103,38.304694,38.401603,37.848631,37.5848663,39.4964831,39.401424,39.3356127,37.4360439,38.0121122,39.0713631);
    longs = new Array (-81.5816714,-81.931094,-81.3513514,-81.9755644,-81.7392611,-80.2709958,-80.1425781,-79.9180457,-80.4194388,-79.8539348,-80.722355,-81.5595981,-80.5868196,-80.9960285,-81.1929363,-81.0978385,-80.4235672,-80.830412,-82.492229,-81.993392,-81.3812904,-77.9541342,-79.0133107,-78.7457004,-81.6041864,-81.1274056,-78.9388241);
    hovertitle = new Array ("Charleston WVDRS","Teays Valley WVDRS","Spencer WVDRS","Point Pleasant WVDRS","Ripley WVDRS","Clarksburg WVDRS","Fairmont WVDRS","Morgantown WVDRS","Weston WVDRS","Elkins WVDRS","Wheeling WVDRS","Parkersburg WVDRS","Weirton WVDRS","Sistersville WVDRS","Beckley WVDRS","Princeton WVDRS","Lewisburg WVDRS","Summersville WVDRS","Huntington WVDRS","Logan WVDRS","Mullens WVDRS","Martinsburg WVDRS","Keyser WVDRS","Romney WVDRS","Welch WVDRS","Oak Hill WVDRS","Moorefield WVDRS");
    htmlAll = new Array ("<h5>Charleston WVDRS</h5><img src=offices/Charleston.png width=200 height=150><p>4701 MacCorkle Avenue SE<br>Charleston, WV 25304<br>304-356-<br>304-926-(Fax)</p><p><a href=directions/Charleston.html>Get Directions</a></p>", 
                        "<h5>Teays Valley WVDRS</h5><img src=offices/webmapDefault.png width=200 height=150 alt=NeedPictureOfOffice><p>115 Liberty Square<br>Hurricane, WV 25526<br>304-760-(Phone)<br>304-759-(Fax)</p><p><a href=directions/TeaysValley.html>Get Directions</a></p>",
                        "<h5>Spencer WVDRS</h5><img src=offices/Spencer.png width=200 height=150><p>321 Market Street<br>Spencer, WV 25276<br>304-927-(Phone)<br>304-927-(Fax)</p><p><a href=directions/Spencer.html>Get Directions</a></p>",
                        "<h5>Point Pleasant WVDRS</h5><img src=offices/PointPleasant.png width=200 height=150><p>209 5th Street<br>Point Pleasant, WV 25550<br>304-675-(Phone)<br>304-675-(Fax)</p><p><a href=directions/PointPleasant.html>Get Directions</a>",
                        "<h5>Ripley WVDRS</h5><img src=offices/webmapDefault.png width=200 height=150><p>206 Stone Drive<br>Ripley, WV 25271<br>304-373-(Phone)<br>304-373-(Fax)</p><p><a href=directions/Ripley.html>Get Directions</a>",
                        "<h5>Clarksburg WVDRS</h5><img src=offices/webmapDefault.png width=200 height=150><p>107 Cambridge Place<br>Bridgeport, WV 26330<br>304-842-(Phone)<br>304-842-(Fax)</p><p><a href=directions/Clarksburg.html>Get Directions</a>",
                        "<h5>Fairmont WVDRS</h5><img src=offices/Fairmont.png width=200 height=150><p>Veterans Square<br>320 Adams Street, Suite 106<br>Fairmont, WV 26554<br>304-367-(Phone)<br>304-367-(Fax)</p><p><a href=directions/Fairmont.html>Get Directions</a>",
                        "<h5>Morgantown WVDRS</h5><img src=offices/Morgantown.png width=200 height =150><p>1415 Earl Core Road<br>Morgantown, WV 26505<br>304-285-(Phone)<br>304-285-(Fax)</p><p><a href=directions/Morgantown.html>Get Directions</a>",
                        "<h5>Weston WVDRS</h5><img src=offices/webmapDefault.png width=200 height =150><p>306 Market Place Mall<br>Weston, WV 26451<br>304-269-0547(Phone)<br>304-269-0427(Fax)</p><p><a href=directions/Weston.html>Get Directions</a>",
                        "<h5>Elkins WVDRS</h5><img src=offices/webmapDefault.png width=200 height =150><p>1025 North Randolph Avenue<br>Elkins, WV 26241<br>304-637-0205(Phone)<br>304-637-0209(Fax)</p><p><a href=directions/Elkins.html>Get Directions</a>",
                        "<h5>Wheeling WVDRS</h5><img src=offices/Wheeling.png width=200 height=150><p>Central Union Building<br>40 14th Street, Suite 103<br>Wheeling, WV 26003<br>304-238-1093(Phone)<br>304-238-1096(Fax)</p><p><a href=directions/Wheeling.html>Get Directions</a>",
                        "<h5>Parkersburg WVDRS</h5><img src=offices/Parkersburg.png width=200 height=150><p>State Office Building<br>400 5th Street<br>Parkersburg, WV 26101<br>304-420-4580(Phone)<br>304-420-4583(Fax)</p><p><a href=directions/Parkersburg.html>Get Directions</a>",
                        "<h5>Weirton WVDRS</h5><img src=offices/Weirton.png width=200 height=150><p>100 Municipal Plaza, Suite 200<br>Weirton, WV 26062<br>304-723-5311(Phone)<br>304-723-5318(Fax)</p><p><a href=directions/Weirton.html>Get Directions</a>",
                        "<h5>Sistersville WVDRS</h5><img src=offices/webmapDefault.png width=200 height=150><p>714 Wells Street<br>Sistersville, WV 26175<br>304-652-2354(Phone)<br>304-652-2359(Fax)</p><p><a href=directions/Sistersville.html>Get Directions</a>",
                        "<h5>Beckley WVDRS</h5><img src=offices/webmapDefault.png width=200 height=150><p>800 New River Town Center<br>Beckley, WV 25801<br>304-256-6900(Phone)<br>304-256-6903(Fax)</p><p><a href=directions/Beckley.html>Get Directions</a>",
                        "<h5>Princeton WVDRS</h5><img src=offices/webmapDefault.png width=200 height=150><p>195 Davis Street<br>Princeton, WV 24739<br>304-425-1256(Phone)<br>304-487-2631(Fax)</p><p><a href=directions/Princeton.html>Get Directions</a>",
                        "<h5>Lewisburg WVDRS</h5><img src=offices/Lewisburg.png width=200 height=150><p>777 North Jefferson Street, Suite 105<br>Lewisburg, WV 24901<br>304-647-7515(Phone)<br>304-647-7518(Fax)</p><p><a href=directions/Lewisburg.html>Get Directions</a>",
                        "<h5>Summersville WVDRS</h5><img src=offices/webmapDefault.png width=200 height=150><p>830 Northside Drive, Suite 113<br>Summersville, WV 26651<br>304-872-0813(Phone)<br>304-872-0518(Fax)</p><p><a href=directions/Summersville.html>Get Directions</a>",
                        "<h5>Huntington WVDRS</h5><img src=offices/Huntington.png width=200 height=150><p>2699 Park Avenue, Suite 200<br>Huntington, WV 25704<br>304-528-5585(Phone)<br>304-528-5591(Fax)</p><p><a href=directions/Huntington.html>Get Directions</a>",
                        "<h5>Logan WVDRS</h5><img src=offices/webmapDefault.png width=200 height=150><p>216 Dingess Street<br>Logan, WV 25601<br>304-792-7060(Phone)<br>304-792-7062(Fax)</p><p><a href=directions/Logan.html>Get Directions</a>",
                        "<h5>Mullens WVDRS</h5><img src=offices/webmapDefault.png width=200 height=150><p>316 Howard Avenue<br>Mullens,WV 25882<br>304-294-5653(Phone)<br>304-294-5655(Fax)</p><p><a href=directions/Mullens.html>Get Directions</a>",
                        "<h5>Martinsburg WVDRS</h5><img src=offices/webmapDefault.png width=200 height=150><p>489 Mid Atlantic Parkway, Suite 2<br>Martinsburg, WV 25404<br>304-267-0005(Phone)<br>304-267-0007(Fax)</p><p><a href=directions/Martinsburg.html>Get Directions</a>",
                        "<h5>Keyser WVDRS</h5><img src=offices/webmapDefault.png width=200 height=150><p>67 North Tornado Way<br>Keyser, WV 26726<br>304-788-2313(Phone)<br>304-788-6389(Fax)</p><p><a href=directions/Keyser.html>Get Directions</a>",
                        "<h5>Romney WVDRS</h5><img src=offices/Romney.png width=200 height=150><p>24948 Northwestern Pike<br>Romney, WV 26757<br>304-822-3957<br>304-822-7417</p><p><a href=directions/Romney.html>Get Directions</a>",
                        "<h5>Welch WVDRS</h5><img src=offices/webmapDefault.png width=200 height=150><p>110 Park Avenue<br>Welch, WV 24801<br>304-436-3175(Phone)<br>304-436-3176(Fax)</p><p><a href=directions/Welch.html>Get Directions</a>",
                        "<h5>Oak Hill WVDRS</h5><img src=offices/webmapDefault.png width=200 height=150><p>549 Mall Road<br>Oak Hill, WV 25901<br>304-465-3025(Phone)<br>304-465-3069(Fax)</p><p><a href=directions/OakHill.html>Get Directions</a>",
                        "<h5>Moorefield WVDRS</h5><img src=offices/webmapDefault.png width=200 height=150 alt=NeedPictureOfOffice><p>151 Robert C. Byrd<br>Industrial Park Road, Suite 3<br>Moorefield, WV 26836<br>304-538-2701(Phone)<br>304-538-2718(Fax)</p><p><a href=directions/Moorefield.html>Get Directions</a>");


    markers = new Array ();
    for (var i = 0; i < 30; i++) {
    myLatlng = new google.maps.LatLng(lats[i],longs[i]);

    var contentString = htmlAll[i];
    var infowindow = new google.maps.InfoWindow({
    content: contentString
    });

    var marker = new google.maps.Marker({
        position: myLatlng,
        map: map,
    html: htmlAll[i],
        title: hovertitle[i]
});

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

});
}}

</script> 
</head> 

<body onLoad="initialize()"> 
<div id="map_canvas"></div> 
</body>
</noscript>
<div style="text-align: center;"><div style="position:relative; top:0; margin-right:auto;mar

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
thumb_up_alt 0 like thumb_down_alt 0 dislike
97 views
Welcome To Ask or Share your Answers For Others

1 Answer

by (71.8m points)
  1. you don't want to create a new map for the FusionTablesLayer, you want to add it to your existing map.
  2. you can't have extraneous white space (the extra space at the end of the table id).

Inside your initialize function (at the end, or at least after you have created the "map", add (to display "West Virginia" only, with the styling in the FusionTables UI):

    var layer = new google.maps.FusionTablesLayer({
        query: {
            select: 'geometry',
            from: '18_J2uuiZRLon48Lc6bclZ0ckHanbKZB9qg319KV3',
            where: "STATE_NAME CONTAINS IGNORING CASE 'West Virginia'"
        },
        options: {
            styleId: 2,
            templateId: 2
        }
    });
    layer.setMap(map);

Working snippet:

function initialize() {
    var myLatlng = new google.maps.LatLng(38.895308, -80.304565);
    var myOptions = {
        zoom: 7,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    lats = new Array(38.3213861, 38.4579809, 38.8014155, 38.9875643, 38.8022869, 39.2844968, 39.4850848, 39.6078332, 39.0194418, 38.9399985, 40.065598, 39.2648469, 40.4019707, 39.5641071, 37.7924745, 37.3602823, 37.8212103, 38.304694, 38.401603, 37.848631, 37.5848663, 39.4964831, 39.401424, 39.3356127, 37.4360439, 38.0121122, 39.0713631);
    longs = new Array(-81.5816714, -81.931094, -81.3513514, -81.9755644, -81.7392611, -80.2709958, -80.1425781, -79.9180457, -80.4194388, -79.8539348, -80.722355, -81.5595981, -80.5868196, -80.9960285, -81.1929363, -81.0978385, -80.4235672, -80.830412, -82.492229, -81.993392, -81.3812904, -77.9541342, -79.0133107, -78.7457004, -81.6041864, -81.1274056, -78.9388241);
    hovertitle = new Array("Charleston WVDRS", "Teays Valley WVDRS", "Spencer WVDRS", "Point Pleasant WVDRS", "Ripley WVDRS", "Clarksburg WVDRS", "Fairmont WVDRS", "Morgantown WVDRS", "Weston WVDRS", "Elkins WVDRS", "Wheeling WVDRS", "Parkersburg WVDRS", "Weirton WVDRS", "Sistersville WVDRS", "Beckley WVDRS", "Princeton WVDRS", "Lewisburg WVDRS", "Summersville WVDRS", "Huntington WVDRS", "Logan WVDRS", "Mullens WVDRS", "Martinsburg WVDRS", "Keyser WVDRS", "Romney WVDRS", "Welch WVDRS", "Oak Hill WVDRS", "Moorefield WVDRS");
    htmlAll = new Array("<h5>Charleston WVDRS</h5><img src=offices/Charleston.png width=200 height=150><p>4701 MacCorkle Avenue SE<br>Charleston, WV 25304<br>304-356-<br>304-926-(Fax)</p><p><a href=directions/Charleston.html>Get Directions</a></p>",
        "<h5>Teays Valley WVDRS</h5><img src=offices/webmapDefault.png width=200 height=150 alt=NeedPictureOfOffice><p>115 Liberty Square<br>Hurricane, WV 25526<br>304-760-(Phone)<br>304-759-(Fax)</p><p><a href=directions/TeaysValley.html>Get Directions</a></p>",
        "<h5>Spencer WVDRS</h5><img src=offices/Spencer.png width=200 height=150><p>321 Market Street<br>Spencer, WV 25276<br>304-927-(Phone)<br>304-927-(Fax)</p><p><a href=directions/Spencer.html>Get Directions</a></p>",
        "<h5>Point Pleasant WVDRS</h5><img src=offices/PointPleasant.png width=200 height=150><p>209 5th Street<br>Point Pleasant, WV 25550<br>304-675-(Phone)<br>304-675-(Fax)</p><p><a href=directions/PointPleasant.html>Get Directions</a>",
        "<h5>Ripley WVDRS</h5><img src=offices/webmapDefault.png width=200 height=150><p>206 Stone Drive<br>Ripley, WV 25271<br>304-373-(Phone)<br>304-373-(Fax)</p><p><a href=directions/Ripley.html>Get Directions</a>",
        "<h5>Clarksburg WVDRS</h5><img src=offices/webmapDefault.png width=200 height=150><p>107 Cambridge Place<br>Bridgeport, WV 26330<br>304-842-(Phone)<br>304-842-(Fax)</p><p><a href=directions/Clarksburg.html>Get Directions</a>",
        "<h5>Fairmont WVDRS</h5><img src=offices/Fairmont.png width=200 height=150><p>Veterans Square<br>320 Adams Street, Suite 106<br>Fairmont, WV 26554<br>304-367-(Phone)<br>304-367-(Fax)</p><p><a href=directions/Fairmont.html>Get Directions</a>",
        "<h5>Morgantown WVDRS</h5><img src=offices/Morgantown.png width=200 height =150><p>1415 Earl Core Road<br>Morgantown, WV 26505<br>304-285-(Phone)<br>304-285-(Fax)</p><p><a href=directions/Morgantown.html>Get Directions</a>",
        "<h5>Weston WVDRS</h5><img src=offices/webmapDefault.png width=200 height =150><p>306 Market Place Mall<br>Weston, WV 26451<br>304-269-0547(Phone)<br>304-269-0427(Fax)</p><p><a href=directions/Weston.html>Get Directions</a>",
        "<h5>Elkins WVDRS</h5><img src=offices/webmapDefault.png width=200 height =150><p>1025 North Randolph Avenue<br>Elkins, WV 26241<br>304-637-0205(Phone)<br>304-637-0209(Fax)</p><p><a href=directions/Elkins.html>Get Directions</a>",
        "<h5>Wheeling WVDRS</h5><img src=offices/Wheeling.png width=200 height=150><p>Central Union Building<br>40 14th Street, Suite 103<br>Wheeling, WV 26003<br>304-238-1093(Phone)<br>304-238-1096(Fax)</p><p><a href=directions/Wheeling.html>Get Directions</a>",
        "<h5>Parkersburg WVDRS</h5><img src=offices/Parkersburg.png width=200 height=150><p>State Office Building<br>400 5th Street<br>Parkersburg, WV 26101<br>304-420-4580(Phone)<br>304-420-4583(Fax)</p><p><a href=directions/Parkersburg.html>Get Directions</a>",
        "<h5>Weirton WVDRS</h5><img src=offices/Weirton.png width=200 height=150><p>100 Municipal Plaza, Suite 200<br>Weirton, WV 26062<br>304-723-5311(Phone)<br>304-723-5318(Fax)</p><p><a href=directions/Weirton.html>Get Directions</a>",
        "<h5>Sistersville WVDRS</h5><img src=offices/webmapDefault.png width=200 height=150><p>714 Wells Street<br>Sistersville, WV 26175<br>304-652-2354(Phone)<br>304-652-2359(Fax)</p><p><a href=directions/Sistersville.html>Get Directions</a>",
        "<h5>Beckley WVDRS</h5><img src=offices/webmapDefault.png width=200 height=150><p>800 New River Town Center<br>Beckley, WV 25801<br>304-256-6900(Phone)<br>304-256-6903(Fax)</p><p><a href=directions/Beckley.html>Get Directions</a>",
        "<h5>Princeton WVDRS</h5><img src=offices/webmapDefault.png width=200 height=150><p>195 Davis Street<br>Princeton, WV 24739<br>304-425-1256(Phone)<br>304-487-2631(Fax)</p><p><a href=directions/Princeton.html>Get Directions</a>",
        "<h5>Lewisburg WVDRS</h5><img src=offices/Lewisburg.png width=200 height=150><p>777 North Jefferson Street, Suite 105<br>Lewisburg, WV 24901<br>304-647-7515(Phone)<br>304-647-7518(Fax)</p><p><a href=directions/Lewisburg.html>Get Directions</a>",
        "<h5>Summersville WVDRS</h5><img src=offices/webmapDefault.png width=200 height=150><p>830 Northside Drive, Suite 113<br>Summersville, WV 26651<br>304-872-0813(Phone)<br>304-872-0518(Fax)</p><p><a href=directions/Summersville.html>Get Directions</a>",
        "<h5>Huntington WVDRS</h5><img src=offices/Huntington.png width=200 height=150><p>2699 Park Avenue, Suite 200<br>Huntington, WV 25704<br>304-528-5585(Phone)<br>304-528-5591(Fax)</p><p><a href=directions/Huntington.html>Get Directions</a>",
        "<h5>Logan WVDRS</h5><img src=offices/webmapDefault.png width=200 height=150><p>216 Dingess Street<br>Logan, WV 25601<br>304-792-7060(Phone)<br>304-792-7062(Fax)</p><p><a href=directions/Logan.html>Get Directions</a>",
        "<h5>Mullens WVDRS</h5><img src=offices/webmapDefault.png width=200 height=150><p>316 Howard Avenue<br>Mullens,WV 25882<br>304-294-5653(Phone)<br>304-294-5655(Fax)</p><p><a href=directions/Mullens.html>Get Directions</a>",
        "<h5>Martinsburg WVDRS</h5><img src=offices/webmapDefault.png width=200 height=150><p>489 Mid Atlantic Parkway, Suite 2<br>Martinsburg, WV 25404<br>304-267-0005(Phone)<br>304-267-0007(Fax)</p><p><a href=directions/Martinsburg.html>Get Directions</a>",
        "<h5>Keyser WVDRS</h5><img src=offices/webmapDefault.png width=200 height=150><p>67 North Tornado Way<br>Keyser, WV 26726<br>304-788-2313(Phone)<br>304-788-6389(Fax)</p><p><a href=directions/Keyser.html>Get Directions</a>",
        "<h5>Romney WVDRS</h5><img src=offices/Romney.png width=200 height=150><p>24948 Northwestern Pike<br>Romney, WV 26757<br>304-822-3957<br>304-822-7417</p><p><a href=directions/Romney.html>Get Directions</a>",
        "<h5>Welch WVDRS</h5><img src=offices/webmapDefault.png width=200 height=150><p>110 Park Avenue<br>Welch, WV 24801<br>304-436-3175(Phone)<br>304-436-3176(Fax)</p><p><a href=directions/Welch.html>Get Directions</a>",
        "<h5>Oak Hill WVDRS</h5><img src=offices/webmapDefault.png width=200 height=150><p>549 Mall Road<br>Oak Hill, WV 25901<br>304-465-3025(Phone)<br>304-465-3069(Fax)</p><p><a href=directions/OakHill.html>Get Directions</a>",
        "<h5>Moorefield WVDRS</h5><img src=offices/webmapDefault.png width=200 height=150 alt=NeedPictureOfOffice><p>151 Robert C. Byrd<br>Industrial Park Road, Suite 3<br>Moorefield, WV 26836<br>304-538-2701(Phone)<br>304-538-2718(Fax)</p><p><a href=directions/Moorefield.html>Get Directions</a>");


    markers = new Array();
    for (var i = 0; i < 30; i++) {
        myLatlng = new google.maps.LatLng(lats[i], longs[i]);

        var contentString = htmlAll[i];
        var infowindow = new google.maps.InfoWindow({
            content: contentString
        });

        var marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            html: htmlAll[i],
            title: hovertitle[i]
        });

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

        });
    }
    var layer = new google.maps.FusionTablesLayer({
        query: {
            select: 'geometry',
            from: '18_J2uuiZRLon48Lc6bclZ0ckHanbKZB9qg319KV3',
            where: "STATE_NAME CONTAINS IGNORING CASE 'West Virginia'"
        },
        options: {
            styleId: 2,
            templateId: 2
        }
    });
    layer.setMap(map);
}
google.maps.event.addDomListener(window, 'l

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
thumb_up_alt 0 like thumb_down_alt 0 dislike
Welcome to ShenZhenJia Knowledge Sharing Community for programmer and developer-Open, Learning and Share

Just Browsing Browsing

548k questions

547k answers

4 comments

86.3k users

Most popular tags

Theme made by Momin Raza, Modified by Ostack
Powered by Question2Answer
...