Maps with Markers load from Json
by Giovani
HTML
<script src="https://maps.googleapis.com/maps/api/js?v=3"></script>
<div id="map"></div>
CSS
html,body,#map{
margin:0;
padding:0;
height:100%;
}
JavaScript
$(window).load(function (){
var map;
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 51.503454, lng: -0.119562},
zoom: 10
});
var contentString = '<div id="content">' +
'<div id="siteNotice">' +
'</div>' +
'<h1 id="firstHeading" class="firstHeading">teste3.1.1.1</h1>' +
'<div id="bodyContent">' +
'<p><b>Morada:</b>teste3.1.1' +
'<p><b>Horário:</b>teste3.1' +
'</div>' +
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: {lat: 51.503454, lng: -0.119562},
map: map,
title: 'Teste3'
});
marker.addListener('click', function () {
infowindow.open(map, marker);
});
//
var contentString_ = '<div id="content">' +
'<div id="siteNotice">' +
'</div>' +
'<h1 id="firstHeading" class="firstHeading">teste2</h1>' +
'<div id="bodyContent">' +
'<p><b>Morada:</b>teste2.1' +
'<p><b>Horário:</b>Teste2.1.1' +
'</div>' +
'</div>';
var infowindow_ = new google.maps.InfoWindow({
content: contentString_
});
var marker3 = new google.maps.Marker({
position: {lat: 51.594454, lng: -0.229562},
map: map,
title: 'Teste 2'
});
marker3.addListener('click', function () {
infowindow_.open(map, marker3);
});
//
var contentString2 = '<div id="content">' +
'<div id="siteNotice">' +
'</div>' +
'<h1 id="firstHeading" class="firstHeading">teste1</h1>' +
'<div id="bodyContent">' +
'<p><b>Morada:</b>teste1.1' +
'<p><b>Horário:</b>Dias' +
'</div>' +
'</div>';
var infowindow2 = new google.maps.InfoWindow({
content: contentString2
});
var marker2 = new google.maps.Marker({
position: {lat: 51.594454, lng: -0.119562},
map: map,
title: 'Teste'
});
marker2.addListener('click', function () {
...