add monuments on the map

[ghost]

can we go about adding points on the map? I want to add the current structures we have and new secret one?

[imrehg]

Sure you can. I've tried the Google Maps API (see the docs here and the rest of the pages linked there: https://developers.google.com/maps/documentation/javascript/examples/marker-simple)

For example place this section right after the line of historicalOverlay.setOpacity(0.7);, to have a marker with an info-balloon:

var marker1 = new google.maps.Marker({
       position: {lat: 34.551629, lng: 38.268083},
       map: map,
       title: 'Tetrapylon'
});
var contentString1 = '<h1>Tetrapylon</h1><div id="bodyContent">This is it! Check it on <a href="https://en.wikipedia.org/wiki/Tetrapylon" target=_blank>Wikipedia</a></div>'
var infowindow1 = new google.maps.InfoWindow({
  content: contentString1
});
marker1.addListener('click', function() {
  infowindow1.open(map, marker1);
});

Here's how the marker looks:

Here's with the info balloon expanded:

You can repeat that block (with adjusted variable names) as many times as you like, or make it more programmatically (e.g. from a json object, I guess?)

[ghost]

Dude this is awesome @clemsos check it

On Apr 24, 2017 6:25 PM, "Gergely Imreh" notifications@github.com wrote:

Sure you can. I've tried the Google Maps API (see the docs here and the rest of the pages linked there: https://developers.google.com/ maps/documentation/javascript/examples/marker-simple)

For example place this section right after the line of historicalOverlay.setOpacity(0.7);, to have a marker with an info-balloon:

var marker1 = new google.maps.Marker({ position: {lat: 34.551629, lng: 38.268083}, map: map, title: 'Tetrapylon' }); var contentString1 = '

Tetrapylon

This is it! Check it on Wikipedia

' var infowindow1 = new google.maps.InfoWindow({ content: contentString1 }); marker1.addListener('click', function() { infowindow1.open(map, marker1); });

Here's how the marker looks: [image: marker1] https://cloud.githubusercontent.com/assets/38863/25362702/7a5d116c-294d-11e7-8ba9-38b014790ce9.png

Here's with the info balloon expanded: [image: marker2] https://cloud.githubusercontent.com/assets/38863/25362712/8541ced8-294d-11e7-97c1-a038912ddb85.png

You can repeat that block (with adjusted variable names) as many times as you like, or make it more programmatically (e.g. from a json object, I guess?)

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/imrehg/palmyramap/issues/7#issuecomment-296849112, or mute the thread https://github.com/notifications/unsubscribe-auth/AADo567tjeTpw_PwW-xIRHj3o2Dyhinyks5rzS9SgaJpZM4NDiv4 .

[clemsos]

great stuff. Let's just link that to the new palmyra website

[ghost]

Absolutely with the waypoints added

On Apr 25, 2017 2:38 AM, "Clément Renaud" notifications@github.com wrote:

great stuff. Let's just link that to the new palmyra website

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/imrehg/palmyramap/issues/7#issuecomment-296943377, or mute the thread https://github.com/notifications/unsubscribe-auth/AADo5zPy2m3IBVpXk_SyJ2cPWdVfEO54ks5rzaLjgaJpZM4NDiv4 .