Title: Replace Google Maps ( leafletjs open-source JavaScript)
Last modified: June 10, 2019

---

# Replace Google Maps ( leafletjs open-source JavaScript)

 *  [speedhr](https://wordpress.org/support/users/speedhr/)
 * (@speedhr)
 * [6 years, 12 months ago](https://wordpress.org/support/topic/replace-google-maps-leafletjs-open-source-javascript/)
 * Hello,
    I have a suggestion Replace Google Maps.
 *  leafletjs open-source JavaScript
 * Take a look at this page there is the replacement without a key.
 * [https://leafletjs.com/](https://leafletjs.com/)
 * [http://www.gpswandern.de/gpxviewer/programmierung.shtml](http://www.gpswandern.de/gpxviewer/programmierung.shtml)

Viewing 3 replies - 1 through 3 (of 3 total)

 *  [diddipoeler](https://wordpress.org/support/users/diddipoeler/)
 * (@diddipoeler)
 * [6 years, 11 months ago](https://wordpress.org/support/topic/replace-google-maps-leafletjs-open-source-javascript/#post-11673153)
 * hallo,
 * ich habe die datei: wassupadmin.php ab zeile 1349 geändert.
 *     ```
       <!-- diddipoeler anfang -->		
       		<!--
       		<div id="spia_map" style="width:90%;height:370px;"></div>
       		-->
   
       <div id="spia_leaflet" style="width:100%;height:500px;"></div>
       <link href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" rel="stylesheet" type="text/css" />
       <link href="https://cdn.jsdelivr.net/npm/leaflet.locatecontrol@0.63.0/dist/L.Control.Locate.min.css" rel="stylesheet" type="text/css" />
       <link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet-routing-machine/3.2.12/leaflet-routing-machine.css" rel="stylesheet" type="text/css" />
       <script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js" type="text/javascript"></script>
       <script src="https://cdn.jsdelivr.net/npm/leaflet.locatecontrol@0.63.0/dist/L.Control.Locate.min.js" type="text/javascript"></script>
       <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-routing-machine/3.2.12/leaflet-routing-machine.js" type="text/javascript"></script>		
   
       <script>
       	var osmUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
       		osmAttrib = '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
       		osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib});
       	var map = L.map('spia_leaflet').setView([<?php echo $pos;?>], 10).addLayer(osm);
   
       </script>
       <?php
       $meta_table=$wassup_options->wassup_table.'_meta';			
       $sql = "SELECT <code>wassup_key</code>, <code>meta_value</code> FROM <code>$meta_table</code> WHERE <code>meta_key</code>= 'hostname' ORDER BY <code>meta_id</code> DESC LIMIT 10";
       $result = $wpdb->get_results($sql);		
       $map_bounds = array();			
       foreach($result as $key)			
       {
       $new_arr = array();
       $new_arr[]= unserialize(file_get_contents('http://www.geoplugin.net/php.gp?ip='.$key->wassup_key));
       ?>
       <script>
       marker = new L.marker([<?php echo $new_arr[0]['geoplugin_latitude'];?>,<?php echo $new_arr[0]['geoplugin_longitude'];?>] )
                        .addTo(map)
       .bindPopup('<?php echo $key->meta_value;?>');	
   
       </script>		
       <?php	
       $map_bounds[] = "[".$new_arr[0]['geoplugin_latitude'].",".$new_arr[0]['geoplugin_longitude']."]";	
       }			
       $comma_bounds = implode(",", $map_bounds);			
       ?>		
       <script>
       map.fitBounds([<?php echo $comma_bounds; ?>]); 	
       </script>			
       <!-- diddipoeler ende -->
       ```
   
 * jetzt werden die letzten 10 einträge gelesen und auf einer karte angezeigt 🙂
 *  Thread Starter [speedhr](https://wordpress.org/support/users/speedhr/)
 * (@speedhr)
 * [6 years, 11 months ago](https://wordpress.org/support/topic/replace-google-maps-leafletjs-open-source-javascript/#post-11675070)
 * Hi diddipoeler,
 * habe das mal so eingebaut .-)
 * Bekomme zwar eine Karte angezeigt aber auf dieser Karte tut sich gar
    nichts.
 * Aber das ist zu mindestens mal ein Anfang und finde es echt super das sich einer
   mal die Mühe macht 🙂 da ich es leider nicht kann… 🙂
 * Gruss Ralf
 *  Thread Starter [speedhr](https://wordpress.org/support/users/speedhr/)
 * (@speedhr)
 * [6 years, 11 months ago](https://wordpress.org/support/topic/replace-google-maps-leafletjs-open-source-javascript/#post-11675090)
 * Ist der Map key von Google bei deinem umbau noch Voraussetzung ?

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Replace Google Maps ( leafletjs open-source JavaScript)’ is closed to
new replies.

 * ![](https://s.w.org/plugins/geopattern-icon/wassup_f2eef0.svg)
 * [WassUp Real Time Analytics](https://wordpress.org/plugins/wassup/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/wassup/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/wassup/)
 * [Active Topics](https://wordpress.org/support/plugin/wassup/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/wassup/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/wassup/reviews/)

 * 3 replies
 * 2 participants
 * Last reply from: [speedhr](https://wordpress.org/support/users/speedhr/)
 * Last activity: [6 years, 11 months ago](https://wordpress.org/support/topic/replace-google-maps-leafletjs-open-source-javascript/#post-11675090)
 * Status: not resolved