your javascript code of google map and marker should be inside window.onload function
<script type="text/javascript">
var locations = <?php echo $locations ?>;
window.onload = function(e){
var map = new google.maps.Map(document.getElementById('regularMap'), {
zoom: 10,
center: new google.maps.LatLng(-33.92, 151.25),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i]['locationLat'], locations[i]['locationLong']),
visible: true,
map: map
});
marker.setMap(map);
}
}
</script>
Update:
https://developers.google.com/maps/documentation/javascript/adding-a-google-map
You can also use callback parameter in your google library loading.
<script>
function initMap (){
var map = new google.maps.Map(document.getElementById('regularMap'), {
zoom: 10,
center: new google.maps.LatLng(-33.92, 151.25),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i]['locationLat'], locations[i]['locationLong']),
visible: true,
map: map
});
marker.setMap(map);
}
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
