Web View Map Sample Code:
<head>
<title>Report</title>
<style type="text/css">
/* Set the size of the div element that contains the map */
#map1 {
height: 100%;
/* The height is 400 pixels */
width: 100%;
/* The width is the width of the web page */
}
</style>
<script>
var latitude = '.$fi_location_lat.'; // php variable value assigning to javascript vaiable
var longitude = '.$fi_location_lng.'; // php variable value assigning to javascript vaiable
// Initialize and add the map
function initMap1() {
// The map, centered at area
const map1 = new google.maps.Map(document.getElementById("map1"), {
zoom: 13,
center: { lat: latitude, lng: longitude},
});
// The marker, positioned at area
const marker = new google.maps.Marker({
position: { lat: latitude, lng: longitude},
map: map1,
});
}
</script>
<!-- This key is not a valid key and it should be created using google account -->
<script src="https://maps.googleapis.com/maps/api/js?key=ERAIcdszaS7Euddsdsadasd34xdF&callback=initMap1&libraries=&v=weekly"defer>
</script>
</head>
<body>
<div id="map1"></div>
<!-- This is Map display div --> </body></html>
Web View and Image Format Sample Code:
This format map view is especially, used for pdf report writing:
<div class="img-box">
<img src="https://maps.googleapis.com/maps/api/staticmap?center='.$fi_location_lat.','.$fi_location_lng.'&zoom=15&scale=1&size=700x450&maptype=roadmap&format=jpeg&visual_refresh=true&markers=color:red|'.$fi_location_lat.','.$fi_location_lng.'&key=ERAIcdszaS7Euddsdsadasd34xdF">
</div>
