The Google maps javascript api contains a simple example that if I put copy/paste it into a html file and place it on my server works nicely.
However I really want to 'copy/paste' the code into a php file and be able to call some javascript functions to 'add markers' to the map (eventually) - but in order to do that I need help understanding how this html code works - because I do not understand how it is actually displaying something to the page.
https://developers.google.com/maps/documentation/javascript/examples/map-simple
Below is my current php file as you see no php code other than opening and closing the php at this time and then the copy paste of the google maps example - yet divs, and I believe the meta doesn't just 'work' like this because I can't have a head? or body? in joomla article?
What I expect to see when i run this file in joomla would be the same thing I see if I would open up my php file by itself - yet nothing shows up (other then the hello world text)...
<?php
?>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
margin: 0;
padding: 0;
height: 100%;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var map;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(44.981314, -93.25633),
mapTypeId: google.maps.MapTypeId.HYBRID
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var myLatlng = new google.maps.LatLng(44.964251, -93.266459);
var marker = new google.maps.Marker({
position: myLatlng,
title: "Hello World!"
});
marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
hello world
<div id="map-canvas"></div>
</body>