Search + Google Maps

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

P R

P R

21/10/2014 12:38:23
Quote Anchor link
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.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<?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>
Gewijzigd op 21/10/2014 15:31:49 door P R
 
Er zijn nog geen reacties op dit bericht.



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.