How to reinitialize Google map API? - google-maps

Question

I am new to the coding part.So I am in need for your kind ideas.
How can i reinitialize the loaded Google map API in one HTML page (eg: MapView.html) from parent HTML page using IFRAME tag?
Is there any possibilities to reload the Google map to view the updated markers in new page without pressing F5 key?

Answer 1

The iframe part makes it very difficult as iframe is used basically for accepting content from an external source without any changes. It would be easier if you injected the script which utilizes Google Map in every page you use it.
I don't understand much what you mean by parent HTML :( If it is a single-page application and the child HTML is a subview of the parent, you could be able to access the parent HTML's controller but I have the feeling that this is not the case :)
So generally you can reinitialize the map using JavaScript. Have a look in the API Reference for all the options:
https://developers.google.com/maps/documentation/javascript/3.exp/reference
If you could create the map in your child HTML, the Marker can be created and updated by following:
var map = new google.maps.Map(document.getElementById('map'), yourMapOptions); // This is the map initiation in a #map element
var marker = new google.maps.Marker({
position: new google.maps.LatLng(...), // the old position
map: map, // The map you created in your element by new google.maps.Map(...)
icon: 'assets/marker.png',
title: 'This is the pointer',
});
setTimeout(function() {
marker.position = new google.maps.LatLng(...); // new position
marker.setMap(map); // This reinitializes the marker
}, 10000); // For this example I set a 10s timeout
Sorry if the iframe is an important thing but without any code I assumed this could help you more than hacking an iframe.