Using MapChart with Google Maps API
This short demo shows how our own MapChart can be overlaid over Google Maps using JavaScript Maps API, complete with total syncing of zoom and pan.
Open in:New tab
/** * --------------------------------------- * This demo was created using amCharts 4. * * For more information visit: * https://www.amcharts.com/ * * Documentation is available at: * https://www.amcharts.com/docs/v4/ * --------------------------------------- */
/** * Create the Google Map */var gmap;
function initGoogleMap() { gmap = new google.maps.Map(document.getElementById("gmap"), { scrollwheel: true, disableDefaultUI: true });}
/** * Create the amCharts Map */
// Create map instancevar ammap = am4core.create("ammap", am4maps.MapChart);ammap.geodata = am4geodata_worldLow;ammap.projection = new am4maps.projections.Mercator();ammap.zoomDuration = 0;
var polygonSeries = ammap.series.push(new am4maps.MapPolygonSeries());polygonSeries.exclude = ["AQ"];polygonSeries.useGeodata = true;
// Add zoom controlammap.zoomControl = new am4maps.ZoomControl();
// Configure seriesvar polygonTemplate = polygonSeries.mapPolygons.template;polygonTemplate.tooltipText = "{name}";polygonTemplate.fill = am4core.color("#74B266");polygonTemplate.fillOpacity = 0.5;
var hs = polygonTemplate.states.create("hover");hs.properties.fill = am4core.color("#367B25");
// Set up GMap centeringammap.events.on("zoomlevelchanged", updateMapPosition);ammap.events.on("mappositionchanged", updateMapPosition);ammap.events.on("scaleratiochanged", updateMapPosition);
function updateMapPosition(ev) { /** * GMap inited? */ if (typeof gmap === "undefined") return;
// set google map zoom level: gmap.setZoom(Math.log2(ammap.zoomLevel) + 1);
// sync position gmap.setCenter({ // a small adjustment needed for this div size: lat: ammap.zoomGeoPoint.latitude, lng: ammap.zoomGeoPoint.longitude });}<!-- Google includes -->
<!-- amCharts includes -->
<!-- HTML --><div id="maps"> <div id="gmap" class="mapdiv" style="visibility: visible"></div> <div id="ammap" class="mapdiv" style="visibility: visible"></div></div>#maps { width: 510px; height: 500px; border: 0px solid #eee; margin: 0px auto; position: relative;}
.mapdiv { width: 510px; height: 500px; position: absolute; top: 0; left: 0;}using-mapchart-with-google-maps-api