StartseiteSkripteJavascript

Standorte in Google Maps anzeigen (IP bezogen)

04. OKTOBER 2011
von Jörg
Skripte - Javascript
google maps icon

Um Google Maps in seiner eigenen Webseite verwenden zu können benötigt es einen Google API Key für die jeweilige Domin. Dafür ist ein Google-Konto nötig, eingeloggt kann dann der API-Key hier angefordert werden.

Einbinden der Google-Map mit Koordinaten verschiedener Standorte

01
02
03
04
05
06
07
08
09
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
63
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=%%GOOGLE-KEY%%"
            type="text/javascript"></script>
  </head>
  <body onload="initialize()" onunload="GUnload()">
    <div id="map-container" style="width: 800px; height: 500px"></div>
    <noscript>Sie benötigen javaScript um diesen Inhalt betrachten zu können.</noscript>
    <script type="text/javascript">
    function initialize() {
    
    if (GBrowserIsCompatible()) {
      var map = new GMap2(document.getElementById("map-container"));
      
      // Ausgangsdaten konfigurieren: 
      // Laengen und Breitenangabe des Karten-Mittelpunktes; 
      // Zoomfaktor, Kartentyp (G_NORMAL_MAP, G_HYBRID_MAP, G_SATELLITE_MAP)
      map.setCenter(new GLatLng(49.719818,11.058426), 7, G_NORMAL_MAP);
      
      function createMarker(point,html) {
        var marker = new GMarker(point);
        
        // Tooltip beim Klick auf den Marker anzeigen oder nicht.
        GEvent.addListener(marker, 'click', function() {
          marker.openInfoWindowHtml(html);
        });
        return marker;
      }
      
      // Standort1 Anfang
      var point = new GLatLng(49.7822,11.1811);
      var marker = createMarker(point,'My Home')
      map.addOverlay(marker);
      // Standort1 Ende
      
      // Standort2 Anfang
      var point = new GLatLng(51.3333,6.5667);
      var marker = createMarker(point,'Friend')
      map.addOverlay(marker);
      // Standort2 Ende
      
      // Standort3 Anfang
      var point = new GLatLng(52.5167,13.4);
      var marker = createMarker(point,'Friend2')
      map.addOverlay(marker);
      // Standort3 Ende
      
      // Navigationselemente einblenden
      map.addControl(new GLargeMapControl());     
      // Kartentypen einblenden
      map.addControl(new GMapTypeControl());     
      // Übersichtskarte einblenden
      map.addControl(new GOverviewMapControl());    
      // Massstab einblenden
      map.addControl(new GScaleControl());     
      }
    }
    </script> 
  </body>
</html>

Oben im Script muss für %%GOOGLE-KEY%% der jeweilige API-Key eingetragen werden.

zur Demoseite

IP Datenbank mit den Koordinaten der Citys

Um anhand der IP von Besuchern auch die nächstgelegene City zu lokalisieren, wird eine Datenbank benötigt. Die konstelose GeoLite City Datenbank habe ich bei MaxMind heruntergeladen (csv) und über phpmyAdmin in meine MySQL-DB importiert.

Es sind 2 Tabellen die dort zum Download bereitstehen:

city_blocks (3.693.418 Einträge)
startIpNumendIpNumlocId
167772161677747117
167774721677823949
.........
2147483647214748364717

city_location (316.848 Einträge)
locIdcountryregioncitypostalCodelatitudelongitudemetroCodeareaCode
1O1 0000
2AP 3510500
...........................
50332DE02Erlangen 49.589711.003900
316848IT06Sant'andrat 45.919413.156100

Um jetzt die richtigen Koordinaten in Bezug auf die IP-Adresse zu bekommen, muss die IP vorab umgerechnet werden.
z.b.: Ip Adresse 24.24.24.24 404232216 = 16777216*24 + 65536*24 + 256*24 + 24
Nun muss die 404232216 in der city_blocks zwischen startIpNum und endIpNum gefunden werden, die erhaltene locId ist dann in der city_location zu finden, und somit auch die Citybezeichnung mit den Koordinaten (latitude, longitude) etc.

In Perl und MySQL habe ich die Umrechnung und Abfrage so getan:

01
02
03
04
05
06
07
08
#City und koords bestimmen
my $ipnum = unpack( N => pack "CCCC", split m/\./, $ENV{REMOTE_ADDR} ); 
my $city = WebDB::get_hash("SELECT locId, country, city, latitude, longitude 
                            FROM city_location 
                            WHERE locId = 
                                  (SELECT locId 
                                   FROM city_blocks 
                                   WHERE ? BETWEEN startIpNum AND endIpNum)", $ipnum );

Kommentare:

Super, endlich einmal ein aufgeräumtes Script! Klar strukturiert und funktional. Wonach ich jetzt noch suche ist die Möglichkeit zur Einbindung einer SQL Datenbank, aus der die Standorte dann ausgelesen werden können. Gibt ew hierz vielleicht auch eine Dokumentation? Vielen Dank für die Hilfe, dafür wäre ich wirklich sehr dankbar. Beste Grüße aus der Eifel!

von Ingolf Piechota am 10. AUGUST 2013 um 12:25 Uhr » www.schoeningberlin.de

You put the lime in the coucont and drink the article up.

von Rowdy am 03. JANUAR 2015 um 00:37 Uhr » http://iskfmxm.com

Hinterlasse einen Kommentar

Ein Frosch der sich an der Seite festhält