Django template (to adapt!) to use OpenLayers.js with the locate_ip filter (https://gist.github.com/matthieucan/540ca40d5e4d2c1783ba)

djangotemplate_openlayers.html

{% load foo_tags %}

<style type="text/css">
/* this is done to prevent a conflict with bootstrap */
#mapOpenLayers img { max-width: none; }
</style>
<div id="mapOpenLayers" style="height: 600px;"></div>

<script src="{% url media path="external/openlayers/lib/OpenLayers.js" %}"></script>
<script>
 function init() {
   var fromProjection = new OpenLayers.Projection("EPSG:4326");   // Transform from WGS 198
   var toProjection   = new OpenLayers.Projection("EPSG:900913"); // to Spherical Mercator Projectio
   var position       = new OpenLayers.LonLat(13.41,52.52);//.transform( fromProjection, toProjection);
   var zoom           = 1;
   
   var markers = new OpenLayers.Layer.Markers("Markers");
   
   var map = new OpenLayers.Map({
     div: "mapOpenLayers", //projection: "EPSG:3857",
     layers: [new OpenLayers.Layer.OSM(), markers],
     center: position, zoom: 1
   });
   
   var redIcon = new OpenLayers.Icon('{% url media path="external/openlayers/img/marker.png" %}');
   var greenIcon = new OpenLayers.Icon('{% url media path="external/openlayers/img/marker-green.png" %}');
   
   {% for line in data %}
     {% with loc=line.address|locateip %}
       {% if loc %}
         var lonlat = new OpenLayers.LonLat({{ loc }}).transform( fromProjection, toProjection);
         var marker = new OpenLayers.Marker(lonlat,
                                            {% if line.state == 0 %}greenIcon{% else %}redIcon{% endif %}.clone()
                                            );
         markers.addMarker(marker);
         
         var popupContent = '<span style="color: {% if line.state == 0 %}green{% else %}red{% endif %};">{{ line.name }}</span>';
         var popup = new OpenLayers.Popup.FramedCloud("Popup",
                                                      lonlat,
                                                      null,
                                                      popupContent,
                                                      null,
                                                      false
                                                      );
         //popup.autoSize = true;
         //popup.opacity = 1.0;
         //popup.border = 0;
         //popup.padding = 0;
         map.addPopup(popup);
         
       {% endif %}
     {% endwith %}
   {% endfor %}
 }
 init();
</script>