Need help with loading a Google map asynchronously on your website? Check out the code snippet below:
function initialize(lat,lng) {
var mapProp = {
center: new google.maps.LatLng(lat,lng),
zoom:15,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI:true
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
function loadScript() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://maps.googleapis.com/maps/api/js?key=&sensor=false&callback=initialize";
document.body.appendChild(script);
}
window.onload = loadScript;
If you want to add an info window to your map, you can do so by following these steps:
...
var lat=40.7127;
var lng=-74.0059;
..
<div onclick="initialize('+lat+','+lng+');">map</div>
..
html_str += '<div id="googleMap" class="map"></div>';
document.getElementById(id).innerHTML = html_str;
While initializing your basic map is successful, adding an info window might give you some trouble. Attempting to insert the code for the info window into the initialize() function may not yield the desired results. Feel free to reach out if you need assistance in adapting this info window functionality to fit seamlessly into your existing code.