Contact Form 7 Map Field
[resolved] Google Maps (13 posts)

  1. tozebaiao
    Posted 2 years ago #

    I really need urgent help. I am trying to get your plugin to work with Google Maps, without success. Followed all the steps on your previous posts, no luck! Here is my code. What am I doing wrong. RGDS

    <link id="cf7-map-field-leaflet-css" rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4.4/leaflet.css" />
    <!--[if lte IE 8]>
    <link id="cf7-map-field-leaflet-ie-css" rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4.4/leaflet.ie.css" />
    <script id="cf7-map-field-leaflet-js" src="http://cdn.leafletjs.com/leaflet-0.4.4/leaflet.js"></script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script src="https://raw.github.com/shramov/leaflet-plugins/master/layer/tile/Google.js"></script>
    <div style="position:relative">
       <div id="CF7MapFieldDiv" style="height:300px;width:100%"></div>
       <span style="position:absolute;right:0px;bottom:20px;font: 12px Arial,Helvetica,sans-serif;background-color: rgba(255, 255, 255, 0.698);padding:2px 7px;z-index: 1000;" >
    		Marker at: <span id="CF7MapMarkerAt">none</span>
    <div id="CF7MapGeolocationDiv">
        <a href="javascript:void(0)" onclick="onFindMeClick()">find my location</a>
    	<span onmouseout="GeolocationHelpOut()" onmouseover="GeolocationHelpOver()" style="cursor:help;font-size:70%; vertical-align:top;font-weight:bold;position:relative">
    		<span id="CF7MapGeolocationHelp" style="visibility:hidden;border:1px solid gray;font: 12px Arial,Helvetica,sans-serif;position:absolute;bottom:15px;left:-10px;width:300px;background-color:rgba(255, 255, 255, 0.698);padding:7px;z-index:1000">
    			By using geolocation I'll try to take you closer to your real-world geographic location, it is not always accurate, and no promise it will work. The browser will ask for your permission so you'll have to accept it.
    	<span id="CF7MapGeoLocationInfo"></span>
    var map;
    var marker;
    var geolocationCirc;
    function GeolocationHelpOver() {
    	document.getElementById('CF7MapGeolocationHelp').style.visibility = "visible";
    function GeolocationHelpOut() {
    	document.getElementById('CF7MapGeolocationHelp').style.visibility = "hidden";
    function updateMarkerPosition(e) {
        var markerLatLang = [e.lat.toFixed(6), e.lng.toFixed(6)].join(',');
        document.getElementById('CF7MapMarkerAt').innerHTML = markerLatLang;
        var hidd = document.getElementById('CF7MapLocationHidden');
        var val = [map.getZoom(), markerLatLang].join(';');
        if (!!hidd) { hidd.value = val; }
    function removeGeoLocationCirc() {
        document.getElementById('CF7MapGeoLocationInfo').innerHTML = "";
        if (!!geolocationCirc) {map.removeLayer(geolocationCirc); }
    function onLocationFound(e) {
        document.getElementById('CF7MapGeoLocationInfo').innerHTML = "You are somewhere around here";
        map.setView(new L.LatLng(e.latlng.lat, e.latlng.lng), 8);
        var radius = e.accuracy / 2;
        geolocationCirc = L.circle(e.latlng, radius, {weight: 1, clickable: false});
        marker.setLatLng([e.latlng.lat, e.latlng.lng]);
    function onLocationError(e) {
        document.getElementById('CF7MapGeoLocationInfo').innerHTML = "Could not determine your location";
    function onMarkerDrag(e) {
    function onMapClick(e) {
    	if (marker === undefined) {
    		var markerIcon = L.icon({
    			iconUrl: 'http://cdn.leafletjs.com/leaflet-0.4.4/images/marker-icon.png',
    			shadowUrl: 'http://cdn.leafletjs.com/leaflet-0.4.4/images/marker-shadow.png',
    			iconSize: [25, 41],
    			iconAnchor: [13, 41],
    			shadowSize: [41, 41],
    			shadowAnchor: [15, 41]
    		marker = L.marker(e.latlng, {
    			icon: markerIcon,
    			draggable: true
    		marker.on('drag', onMarkerDrag);
    	} else {
    		marker.setLatLng([e.latlng.lat, e.latlng.lng]);
    function initmap() {
        // set up the map
        map = new L.Map('CF7MapFieldDiv');
        // create the tile layer with correct attribution
        var mapUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
        var mapAttrib = 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>';
        var mapTile = new L.TileLayer(mapUrl, {
            minZoom: 2,
            maxZoom: 18,
            attribution: mapAttrib
        var ggl = new L.Google(); map.addLayer(ggl);
        // set default view (London)
        map.setView(new L.LatLng(51.501, -0.105), 8);
        // add events
        map.on('click', onMapClick);
    	map.on('locationerror', onLocationError);
    	map.on('locationfound', onLocationFound);
    function onFindMeClick() {
        // geo locate
        document.getElementById('CF7MapGeoLocationInfo').innerHTML = "Searching...";


  2. shemesh
    Plugin Author

    Posted 2 years ago #

    please read this post

  3. tozebaiao
    Posted 2 years ago #

    Hi Shemesh, Thanks for your prompt reply. If you note from the code above I have implemented all the changes you refer on the post you sent me to. However it is not working. Your code on jsfiddle also does not work, if you check http://jsfiddle.net/XZjZa/ RGDS

  4. shemesh
    Plugin Author

    Posted 2 years ago #

    damn, you right.
    i'll look into this later.

  5. tozebaiao
    Posted 2 years ago #

    Thanks Shemesh. I will wait. RGDS

  6. shemesh
    Plugin Author

    Posted 2 years ago #

    OK, solution found!
    seems to be some problem with the google maps plugin for Leaflet.

    edit: contact-form-7-map-field/map-code-leaflet.html
    add those 2 lines right under .../leaflet.js
    <script src="http://maps.google.com/maps/api/js?v=3.2&sensor=false"></script>
    <script src="http://matchingnotes.com/javascripts/leaflet-google.js"></script>

    than inside initmap() find: map.addLayer(mapTile);
    replace it with:
    var googleLayer = new L.Google(); map.addLayer(googleLayer);

  7. shemesh
    Plugin Author

    Posted 2 years ago #

    here is the complete file on jsfiddle, simply copy/paste:

  8. shemesh
    Plugin Author

    Posted 2 years ago #

    p.s. another fix:
    in order to see the markers on top of google maps add this right at the top of the same file:
    <style type="text/css">
    .leaflet-map-pane {
    z-index: 2 !important;

    .leaflet-google-layer {
    z-index: 1 !important;


  9. tozebaiao
    Posted 2 years ago #

    Shemesh, You rock! Its working just fine. Great plugin! RGDS

  10. lukeblackmore
    Posted 2 years ago #

    Soooo close - loads the map, but map isn't draggable or zoomable (replaced whole page with code from http://jsfiddle.net/X83Cx/1/ too) - is this something obvious I haven't spotted in the code?

    See http://www.thinkgb.co.uk/commercial/

  11. shemesh
    Plugin Author

    Posted 2 years ago #

    lukeblackmore - this seems to be a specific problem on your page, in jsfiddle the same code works flawlessly.
    looking at the console of your page i see this message "Warning: you have included the Google Maps API multiple times on this page. This may cause unexpected errors."
    so check your code.

  12. tozebaiao
    Posted 2 years ago #

    Shemesh, I want to include your plugin in another project with google maps again. Is there a way to get it as far as zoom till streetview?

  13. shemesh
    Plugin Author

    Posted 2 years ago #

    try changing the "minZoom: 2". it might do the trick.

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • Contact Form 7 Map Field
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic


No tags yet.