I have been using W3 CSS references to help set up a web page and it works perfectly until I try to play with it. As soon as I try to add the extra marker it doesn't show up on the web page, but there is no indication that the script is in error.
I want to add two markers to the one map so that the Church and the Presbytery are both displayed. The lat and long for the church are (-27.557692, 151.932294). The lat and lng for the presbytery are: (lat:-27.557458,lng:151.932975)
This is the existing code. Can someone tell me what I have to do to make two markers appear? Thanks
<!-- Google Maps -->
<div id="googleMap" style="width:100%;height:420px;"></div>
<script>
function myMap()
{
myCenter=new google.maps.LatLng(-27.557692, 151.932294);
var mapOptions= {
center:myCenter,
zoom:14, scrollwheel: false, draggable: false,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapOptions);
var marker = new google.maps.Marker({
position: myCenter,
});
marker.setMap(map);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCSg2YnESq0U3ncI0oZ8A_9SQSc1Sd4Edo&callback=myMap"></script>
<!--
To use this code on your website, get a free API key from Google.