WordPress.org

Forums

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

  1. tozebaiao
    Member
    Posted 1 year ago #

    Hi,
    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" />
    <![endif]-->
    <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>
    	</span>
    </div>
    <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>
    	</span>
    	&nbsp;&nbsp;
    	<span id="CF7MapGeoLocationInfo"></span>
    </div>
    <script>
    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});
        map.addLayer(geolocationCirc);
        marker.setLatLng([e.latlng.lat, e.latlng.lng]);
        updateMarkerPosition(marker.getLatLng());
    }
    function onLocationError(e) {
        document.getElementById('CF7MapGeoLocationInfo').innerHTML = "Could not determine your location";
    }
    function onMarkerDrag(e) {
        removeGeoLocationCirc();
        updateMarkerPosition(marker.getLatLng());
    }
    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
    		}).addTo(map);
    		marker.on('drag', onMarkerDrag);
    	} else {
    		marker.setLatLng([e.latlng.lat, e.latlng.lng]);
    	}
        removeGeoLocationCirc();
        updateMarkerPosition(e.latlng);
    }
    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
        removeGeoLocationCirc();
        document.getElementById('CF7MapGeoLocationInfo').innerHTML = "Searching...";
        map.locate();
    }
    initmap();
    </script>

    http://wordpress.org/plugins/contact-form-7-map-field/

  2. shemesh
    Member
    Plugin Author

    Posted 1 year ago #

    please read this post

  3. tozebaiao
    Member
    Posted 1 year 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
    Member
    Plugin Author

    Posted 1 year ago #

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

  5. tozebaiao
    Member
    Posted 1 year ago #

    Thanks Shemesh. I will wait. RGDS

  6. shemesh
    Member
    Plugin Author

    Posted 1 year ago #

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

    here...
    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
    Member
    Plugin Author

    Posted 1 year ago #

    here is the complete file on jsfiddle, simply copy/paste:
    http://jsfiddle.net/X83Cx/

  8. shemesh
    Member
    Plugin Author

    Posted 1 year 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;
    }
    </style>

    http://jsfiddle.net/X83Cx/1/

  9. tozebaiao
    Member
    Posted 1 year ago #

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

  10. lukeblackmore
    Member
    Posted 1 year 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
    Member
    Plugin Author

    Posted 1 year 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
    Member
    Posted 1 year 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?
    RGDS

  13. shemesh
    Member
    Plugin Author

    Posted 1 year 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

Tags

No tags yet.