Op mijn website heb ik Google Maps toegevoegd en daarop worden diverse bedrijven weergegeven. Nu kom ik er niet uit hoe ik een zoekfunctie kan toevoegen zodat hij gaat zoeken in de weergegeven map en daar dan de resultaten laat zien in een straal van bijvoorbeeld 25 kilometer. De informatie van het bedrijf krijg ik wel te zien wanneer ik op de marker klik. Nu wou ik deze informatie weergeven langs de map op de webpagina. Ik krijg dit helaas niet gevonden en weet niet zo goed hoe ik daar op Google op moet zoeken. Hopelijk heeft iemand wat tips of kan mij een duwtje in de goede richting geven.

/Edit: Code toegevoegd. Uiteraard klopt het openen van PHP niet, maar anders gaf hij geen code weer.

<?php

<script src="https://maps.googleapis.com/maps/api/js?libraries=visulization"></script>

<script type="text/javascript">jQuery(function($) {
var script = document.createElement('script');
script.src = "http://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize";
document.body.appendChild(script);
});

function initialize() {
var map;
var bounds = new google.maps.LatLngBounds();
var mapOptions = {
mapTypeId: 'roadmap'
};

map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
map.setTilt(45);

var markers = [
];

var infoWindowContent = [
];

var infoWindow = new google.maps.InfoWindow(), marker, i;

for( i = 0; i < markers.length; i++ ) {
var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
bounds.extend(position);
marker = new google.maps.Marker({
position: position,
map: map,
title: markers[i][0]
});

google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infoWindow.setContent(infoWindowContent[i][0]);
infoWindow.open(map, marker);
}
})(marker, i));

map.fitBounds(bounds);
}

var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
this.setZoom(7);
google.maps.event.removeListener(boundsListener);
});

}</script>

<style>
#map_canvas {
width: 479px;
height: 622px;
}
</style>

<div id="map_canvas"></div>

Reageren