I am trying to incorporate a Google map into my Ionic app. I followed the code provided in this
https://developers.google.com/maps/documentation/javascript/adding-a-google-map<ion-view view-title="Browse">
<ion-content>
<h1>Browse</h1>
</ion-content>
</ion-view>When attempting to simply copy and paste the following code snippet:
<!DOCTYPE html>
<html>
<head>
<style>
#map {
height: 400px;
width: 100%;
}
</style>
</head>
<body>
<h3>My Google Maps Demo</h3>
<div id="map"></div>
<script>
function initMap() {
var uluru = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>I tried adding my API KEY, but unfortunately it didn't work due to possibly different settings in the Ionic framework. I also came across this resource:
https://www.joshmorony.com/integrating-google-maps-with-an-ionic-application/