javascript - How to insert Google maps into Wordpress -
i want insert google maps wordpress site. because want circles on map can't use plugins insert map me. want use code site maps javascript api should work think. copied code , inserted on page editor can show js , html. browser key, replaced code @ specified place , confirmed domain.
src="https://maps.googleapis.com/maps/api/js?key=my_key&signed_in=true&callback=initmap"> but nothing show @ page. no error, no maps, no empty space.
now thought reason don't add version. (if no version added automatically experimental version used) nevertheless tried v=3 should release version.
src="https://maps.googleapis.com/maps/api/js?v=3key=my_key&signed_in=true&callback=initmap"> and errors noapikeys, invalidversion , missingkeymaperror. why ? version should valid , key well. made many different tutorials , stuff nothing works.
did knows change work?
here whole code, same on google page.
<!doctype html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <title>circles</title> <style> html, body { height: 100%; margin: 0; padding: 0; } #map { height: 100%; } </style> </head> <body> <div id="map"></div> <script> // first, create object containing latlng , population each city. var citymap = { chicago: { center: {lat: 41.878, lng: -87.629}, population: 2714856 }, newyork: { center: {lat: 40.714, lng: -74.005}, population: 8405837 }, losangeles: { center: {lat: 34.052, lng: -118.243}, population: 3857799 }, vancouver: { center: {lat: 49.25, lng: -123.1}, population: 603502 } }; function initmap() { // create map. var map = new google.maps.map(document.getelementbyid('map'), { zoom: 4, center: {lat: 37.090, lng: -95.712}, maptypeid: google.maps.maptypeid.terrain }); // construct circle each value in citymap. // note: scale area of circle based on population. (var city in citymap) { // add circle city map. var citycircle = new google.maps.circle({ strokecolor: '#ff0000', strokeopacity: 0.8, strokeweight: 2, fillcolor: '#ff0000', fillopacity: 0.35, map: map, center: citymap[city].center, radius: math.sqrt(citymap[city].population) * 100 }); } } </script> <script async defer src="https://maps.googleapis.com/maps/api/js?v=3key=my_key&signed_in=true&callback=initmap"> </script>
i happy if "dislikes" write short comment why. tried ask questions , if missing or wrong change it.
i debug first listing simple map skipping code below
// construct circle each value in citymap. it me pinpoint code creating issue , take on there.
Comments
Post a Comment