显示大洲地图并放大显示国家

Question

on my web page in CONTACT section I want to add interactive google maps. Idea is, on load user can see all maps with continents

And when user click on continent, maps automatically zoom in

And user can click on any of this country to get some event (in my example alert)

This is how I do this, but I don't know how to separate continents and countres and zoom in

 // the map var map; function initialize() { var myOptions = { zoom: 2, center: new google.maps.LatLng(10, 0), mapTypeId: google.maps.MapTypeId.ROADMAP }; // initialize the map map = new google.maps.Map(document.getElementById('map-canvas'), myOptions); // these are the map styles var styles = [ { "featureType": "administrative", "elementType": "all", "stylers": [ { "color": "#a8a8a8" } ] }, { "featureType": "administrative.country", "elementType": "geometry.fill", "stylers": [ { "visibility": "off" } ] }, { "featureType": "administrative.country", "elementType": "geometry.stroke", "stylers": [ { "visibility": "on" } ] }, { "featureType": "administrative.country", "elementType": "labels", "stylers": [ { "visibility": "off" } ] }, { "featureType": "administrative.country", "elementType": "labels.text", "stylers": [ { "visibility": "simplified" } ] }, { "featureType": "administrative.country", "elementType": "labels.text.fill", "stylers": [ { "visibility": "off" } ] }, { "featureType": "administrative.country", "elementType": "labels.icon", "stylers": [ { "visibility": "off" } ] }, { "featureType": "administrative.province", "elementType": "all", "stylers": [ { "visibility": "off" } ] }, { "featureType": "administrative.province", "elementType": "geometry", "stylers": [ { "visibility": "off" } ] }, { "featureType": "administrative.locality", "elementType": "all", "stylers": [ { "visibility": "off" } ] }, { "featureType": "administrative.neighborhood", "elementType": "all", "stylers": [ { "visibility": "off" } ] }, { "featureType": "administrative.land_parcel", "elementType": "all", "stylers": [ { "visibility": "off" } ] }, { "featureType": "landscape", "elementType": "all", "stylers": [ { "saturation": -100 }, { "lightness": 60 }, { "visibility": "on" }, { "color": "#e2e2e2" } ] }, { "featureType": "poi", "elementType": "all", "stylers": [ { "visibility": "off" } ] }, { "featureType": "poi.park", "elementType": "geometry.fill", "stylers": [ { "color": "#b6c54c" }, { "lightness": 40 }, { "saturation": -40 } ] }, { "featureType": "road", "elementType": "all", "stylers": [ { "visibility": "off" } ] }, { "featureType": "road.highway", "elementType": "geometry.fill", "stylers": [ { "color": "#ef8c25" }, { "lightness": 40 } ] }, { "featureType": "road.highway", "elementType": "geometry.stroke", "stylers": [ { "visibility": "off" } ] }, { "featureType": "road.local", "elementType": "all", "stylers": [ { "saturation": -100 }, { "lightness": 40 }, { "visibility": "on" } ] }, { "featureType": "transit", "elementType": "all", "stylers": [ { "saturation": -100 }, { "visibility": "off" } ] }, { "featureType": "water", "elementType": "all", "stylers": [ { "visibility": "simplified" }, { "lightness": 30 }, { "color": "#ffffff" }, { "saturation": "16" } ] }, { "featureType": "water", "elementType": "labels", "stylers": [ { "visibility": "off" } ] } ] map.setOptions({styles: styles}); // Initialize JSONP request var script = document.createElement('script'); var url = ['https://www.googleapis.com/fusiontables/v1/query?']; url.push('sql='); var query = 'SELECT name, kml_4326 FROM ' + '1foc3xO9DyfSIF6ofvN0kp2bxSfSeKog5FbdWdQ'; var encodedQuery = encodeURIComponent(query); url.push(encodedQuery); url.push('&callback=drawMap'); url.push('&key=AIzaSyAm9yWCV7JPCTHCJut8whOjARd7pwROFDQ'); script.src = url.join(''); var body = document.getElementsByTagName('body')[0]; body.appendChild(script); } function drawMap(data) { var rows = data['rows']; for (var i in rows) { if (rows[i][0] != 'Antarctica') { var newCoordinates = []; var geometries = rows[i][1]['geometries']; if (geometries) { for (var j in geometries) { newCoordinates.push(constructNewCoordinates(geometries[j])); } } else { newCoordinates = constructNewCoordinates(rows[i][1]['geometry']); } var country = new google.maps.Polygon({ paths: newCoordinates, strokeColor: '#a8a8a8', strokeOpacity: 1, strokeWeight: 0.3, fillColor: '#a8a8a8', fillOpacity: 0, name: rows[i][0] }); google.maps.event.addListener(country, 'mouseover', function() { this.setOptions({fillOpacity: 0.4}); }); google.maps.event.addListener(country, 'mouseout', function() { this.setOptions({fillOpacity: 0}); }); google.maps.event.addListener(country, 'click', function() { if(this.name =="Brazil"){ alert("Brazil"); }; if(this.name =="Croatia"){ alert("Croatia"); }; if(this.name =="Russia"){ alert("Russia"); }; }); country.setMap(map); } } } function constructNewCoordinates(polygon) { var newCoordinates = []; var coordinates = polygon['coordinates'][0]; for (var i in coordinates) { newCoordinates.push( new google.maps.LatLng(coordinates[i][1], coordinates[i][0])); } return newCoordinates; } google.maps.event.addDomListener(window, 'load', initialize); 

 #map-canvas { height: 600px; width: 800px; } 

 <div id="map-canvas"></div> 

Here is working jsfiddle

This is where I find idea AMCHARTS but I need free and custom solution

And also, in my code, you can find this

 google.maps.event.addListener(country, 'click', function() {
      if(this.name =="Brazil"){  
      alert("Brazil");
      };
      if(this.name =="Croatia"){  
      alert("Croatia");
      };
     if(this.name =="Russia"){
      alert("Russia");
      };
    });

Why here, if I add ELSE code not working

 google.maps.event.addListener(country, 'click', function() {
      if(this.name =="Brazil"){  
      alert("Brazil");
      };
      if(this.name =="Croatia"){  
      alert("Croatia");
      };
     if(this.name =="Russia"){
      alert("Russia");
      };
     else{
      alert("Send Us mail");
     }
    });

Answer 1

On the click-event you could just set the map.setZoom(4); to get the map to zoom in.

You could look in to the if (geometries) {} , I think it is there the lines will be outdrawn. If you comment that out the lines disappears. Set a click-event on the hole MAP and not COUNTRY like you do now. And set something like if(map.zoom === 4){ //add the country lines}; . Hopefully this guides you in some direction closer to the answer.

The if statement is wrong. Change it to else if statement like this:

if(this.name =="Brazil"){ 
    alert("Brazil"); 
} else if(this.name =="Croatia"){ 
    alert("Croatia"); 
} else if(this.name =="Russia"){ 
    alert("Russia"); 
} else { 
    alert("Send Us mail"); 
}