The application has a Google map, how to make it display only geo-points of interest?

  • I think you should study api) - Georgy Chebotaryov

1 answer 1

I applied the following script:

function initialize() { var mapOptions = { center: new google.maps.LatLng(57.4809681,15.5604045), zoom: 7, mapTypeId: google.maps.MapTypeId.TERRAIN, }; var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); var ob2 = new google.maps.Marker({ position: new google.maps.LatLng(56.658096,16.355235), map: map, icon: '../../../maps_icons/castle.svg' }); var infowindow2 = new google.maps.InfoWindow({ content: '<div class="info"><h3>Kalmar Castle</h3><img src="../../../sights/images/kalmar-min.jpg" /><div style="clear:both"></div><a href="../../../sights/en/kalmar-en.html" target="_blank"><button>Read more</button></a></div>' }); google.maps.event.addListener(ob2, 'click', function() { infowindow2.open(map, ob2); }); var ob3 = new google.maps.Marker({ position: new google.maps.LatLng(56.6645407,16.3653616), map: map, icon: '../../../maps_icons/church.svg' }); var infowindow3 = new google.maps.InfoWindow({ content: '<div class="info"><h3>Kalmar Cathedral</h3><img src="../../../church/images/kalmar-min.jpg" /><div style="clear:both"></div><a href="../../../church/en/kalmar.html" target="_blank"><button>Read more</button></a></div>' }); google.maps.event.addListener(ob3, 'click', function() { infowindow3.open(map, ob3); }); var ob4 = new google.maps.Marker({ position: new google.maps.LatLng(58.4098582,15.5230975), map: map, icon: '../../../maps_icons/museum.svg' }); var infowindow4 = new google.maps.InfoWindow({ content: '<div class="info"><h3>Swedish Air Force Museum</h3><img class=img-l src="../../../museums-r/images/air-min.jpg" /><div style="clear:both"></div><a href="../../../museums-r/en/air.html" target="_blank"><button>Read more</button></a></div>' }); google.maps.event.addListener(ob4, 'click', function() { infowindow4.open(map, ob4); }); var ob5 = new google.maps.Marker({ position: new google.maps.LatLng(58.410553,15.616078), map: map, icon: '../../../maps_icons/castle.svg' }); var infowindow5 = new google.maps.InfoWindow({ content: '<div class="info"><h3>Linköping Castle</h3><img src="../../../sights/images/linkoping-min.jpg" /><div style="clear:both"></div><a href="../../../sights/en/linkoping-en.html" target="_blank"><button>Read more</button></a></div>' }); google.maps.event.addListener(ob5, 'click', function() { infowindow5.open(map, ob5); }); var ob6 = new google.maps.Marker({ position: new google.maps.LatLng(58.411052,15.616588), map: map, icon: '../../../maps_icons/church.svg' }); var infowindow6 = new google.maps.InfoWindow({ content: '<div class="info"><h3>Linköping Cathedral</h3><img src="../../../church/images/linkoping-min.jpg" /><div style="clear:both"></div><a href="../../../church/en/linkoping.html" target="_blank"><button>Read more</button></a></div>' }); google.maps.event.addListener(ob6, 'click', function() { infowindow6.open(map, ob6); }); var ob7 = new google.maps.Marker({ position: new google.maps.LatLng(58.5504141,16.0400284), map: map, icon: '../../../maps_icons/castle.svg' }); var infowindow7 = new google.maps.InfoWindow({ content: '<div class="info"><h3>Löfstad Castle</h3><img src="../../../sights/images/lofstad-min.jpg" /><div style="clear:both"></div><a href="../../../sights/en/lofstad-en.html" target="_blank"><button>Read more</button></a></div>' }); google.maps.event.addListener(ob7, 'click', function() { infowindow7.open(map, ob7); }); var ob8 = new google.maps.Marker({ position: new google.maps.LatLng(58.445997,14.883563), map: map, icon: '../../../maps_icons/castle.svg' }); var infowindow8 = new google.maps.InfoWindow({ content: '<div class="info"><h3>Vadstena Castle</h3><img src="../../../sights/images/vadstena-min.jpg" /><div style="clear:both"></div><a href="../../../sights/en/vadstena-en.html" target="_blank"><button>Read more</button></a></div>' }); google.maps.event.addListener(ob8, 'click', function() { infowindow8.open(map, ob8); }); var ob9 = new google.maps.Marker({ position: new google.maps.LatLng(58.4508051,14.8913536), map: map, icon: '../../../maps_icons/church.svg' }); var infowindow9 = new google.maps.InfoWindow({ content: '<div class="info"><h3>Vadstena Abbey</h3><img src="../../../church/images/vadstena-min.jpg" /><div style="clear:both"></div><a href="../../../church/en/vadstena.html" target="_blank"><button>Read more</button></a></div>' }); google.maps.event.addListener(ob9, 'click', function() { infowindow9.open(map, ob9); }); var ob10 = new google.maps.Marker({ position: new google.maps.LatLng(58.4810449,15.5147372), map: map, icon: '../../../maps_icons/church.svg' }); var infowindow10 = new google.maps.InfoWindow({ content: '<div class="info"><h3>Vreta Abbey</h3><img src="../../../church/images/vreta-min.jpg" /><div style="clear:both"></div><a href="../../../church/en/vreta.html" target="_blank"><button>Read more</button></a></div>' }); google.maps.event.addListener(ob10, 'click', function() { infowindow10.open(map, ob10); }); var ob11 = new google.maps.Marker({ position: new google.maps.LatLng(56.87739,14.8120138), map: map, icon: '../../../maps_icons/church.svg' }); var infowindow11 = new google.maps.InfoWindow({ content: '<div class="info"><h3>Växjö Cathedral</h3><img src="../../../church/images/vaxjo-min.jpg" /><div style="clear:both"></div><a href="../../../church/en/vaxjo.html" target="_blank"><button>Read more</button></a></div>' }); google.maps.event.addListener(ob11, 'click', function() { infowindow11.open(map, ob11); }); var ob12 = new google.maps.Marker({ position: new google.maps.LatLng(56.1614029,15.5995131), map: map, icon: '../../../maps_icons/museum.svg' }); var infowindow12 = new google.maps.InfoWindow({ content: '<div class="info"><h3>Naval Museum</h3><img src="../../../museums-r/images/marinmuseum-min.jpg" /><div style="clear:both"></div><a href="../../../museums-r/en/marinmuseum.html" target="_blank"><button>Read more</button></a></div>' }); google.maps.event.addListener(ob12, 'click', function() { infowindow12.open(map, ob12); }); var ob13 = new google.maps.Marker({ position: new google.maps.LatLng(56.87054,16.64346), map: map, icon: '../../../maps_icons/castle.svg' }); var infowindow13 = new google.maps.InfoWindow({ content: '<div class="info"><h3>Borgholm Castle</h3><img src="../../../sights/images/borgholm-min.jpg" /><div style="clear:both"></div><a href="../../../sights/en/borgholm-en.html" target="_blank"><button>Read more</button></a></div>' }); google.maps.event.addListener(ob13, 'click', function() { infowindow13.open(map, ob13); }); var ob14 = new google.maps.Marker({ position: new google.maps.LatLng(56.292902,16.484052), map: map, icon: '../../../maps_icons/fortress.svg' }); var infowindow14 = new google.maps.InfoWindow({ content: '<div class="info"><h3>Eketorp fort</h3><img src="../../../sights/images/eketorp-min.jpg" /><div style="clear:both"></div><a href="../../../sights/en/eketorp-en.html" target="_blank"><button>Read more</button></a></div>' }); google.maps.event.addListener(ob14, 'click', function() { infowindow14.open(map, ob14); }); var ob15 = new google.maps.Marker({ position: new google.maps.LatLng(56.1104337,15.5646414), map: map, icon: '../../../maps_icons/fortress.svg' }); var infowindow15 = new google.maps.InfoWindow({ content: '<div class="info"><h3>Drottningskär Citadel</h3><img src="../../../sights/images/drottningskar-min.jpg" /><div style="clear:both"></div><a href="../../../sights/en/drottningskar-en.html" target="_blank"><button>Read more</button></a></div>' }); google.maps.event.addListener(ob15, 'click', function() { infowindow15.open(map, ob15); }); } google.maps.event.addDomListener(window, 'load', initialize); 

Here you declare a card and give a zoo and center:

 function initialize() { var mapOptions = { center: new google.maps.LatLng(57.4809681,15.5604045), zoom: 7, mapTypeId: google.maps.MapTypeId.TERRAIN, }; 

Here you create an object, an info window with information and a photo of the object and return the click event:

 var ob2 = new google.maps.Marker({ position: new google.maps.LatLng(56.658096,16.355235), map: map, icon: '../../../maps_icons/castle.svg' }); var infowindow2 = new google.maps.InfoWindow({ content: '<div class="info"><h3>Kalmar Castle</h3><img src="../../../sights/images/kalmar-min.jpg" /><div style="clear:both"></div><a href="../../../sights/en/kalmar-en.html" target="_blank"><button>Read more</button></a></div>' }); google.maps.event.addListener(ob2, 'click', function() { infowindow2.open(map, ob2); }); 

Of course, you need to create styles for the content of info-windows.