Country boundries using Google Map API v3

by

See this similar question:
Google Maps V3: Draw German State Polygons?

The Natural Earth Data Set in FusionTables has country polygons available in it. You can style them as you like.

I used it to create this example:
http://www.geocodezip.com/v3_FusionTablesLayer_worldmap_linkto.html

Here is an example that uses a KmlLayer:
http://www.geocodezip.com/v3_GoogleEx_layer-kml_world_countries_simple.html

code snippet:

var kmlLayer = null;
var map = null;

function openIW(layerEvt) {
  if (layerEvt.row) {
    var content = layerEvt.row['admin'].value;
  } else if (layerEvt.featureData) {
    var content = layerEvt.featureData.name;
  }
  document.getElementById('info').innerHTML = "you clicked on:<br>" + content;
}

function initialize() {
  var chicago = new google.maps.LatLng(36.4278, -15.9);
  var myOptions = {
    zoom: 0,
    center: chicago,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }

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

  google.maps.event.addListener(map, "click", function() {
    document.getElementById('info').innerHTML = "";
  });


  kmlLayer = new google.maps.KmlLayer('http://www.geocodezip.com/geoxml3_test/world_countries_kml.xml', {
    preserveViewport: true,
    suppressInfoWindows: true
  });
  kmlLayer.setMap(map);

  google.maps.event.addListener(kmlLayer, 'click', openIW);
}
google.maps.event.addDomListener(window, 'load', initialize);
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<table>
  <tr>
    <td>
      <div id="map_canvas" style="height:200px; width:300px;"></div>
    </td>
    <td>
      <div id="info"></div>
    </td>
  </tr>
</table>

More Related Contents:

  1. How can I check whether Google Maps is fully loaded?
  2. Using Address Instead Of Longitude And Latitude With Google Maps API
  3. How to Display Multiple Google Maps per page with API V3
  4. How do I return a variable from Google Maps JavaScript geocoder callback?
  5. How to calculate the latlng of a point a certain distance away from another?
  6. Google Maps API autocomplete 2nd address fields on same page
  7. Selecting last element in JavaScript array [duplicate]
  8. How do I resize a Google Map with JavaScript after it has loaded?
  9. Google Maps API V3 : How show the direction from a point A to point B (Blue line)?
  10. Resize Google Maps marker icon image
  11. How to get Google Maps API to set the correct zoom level for a country?
  12. Have just one InfoWindow open in Google Maps API v3
  13. Google map comes partially, grey area comes instead of images from google server
  14. Check if polygon is inside a polygon
  15. Google Maps not rendering completely on page?
  16. Google Maps API v3.19 Broken in Internet Explorer Quirks Mode
  17. Display world map with no repeats
  18. Request main road / curbside StreetView panoramas instead of back alleys from API
  19. Representing Points on a Circular Radar Math approach
  20. Google Maps API v3: InfoWindow not sizing correctly
  21. XMLHttpRequest cannot load No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:3000’ Google maps
  22. Google Maps API v3: How do I dynamically change the marker icon?
  23. How can I pass a parameter to a function without it running right away?
  24. How to detect if a point is in a Circle?
  25. Google Maps – Weird geometry.location attributes (G, K)
  26. Draw radius around a point in Google map
  27. Highlight polygon and tint rest of map using Google Maps [duplicate]
  28. Google Maps infoWindow only loading last record on markers
  29. Using Longitude/Latitude as Waypoint
  30. Google Maps API Multiple Markers with Infowindows

Leave a Comment