WordPress.org

Ready to get started?Download WordPress

Forums

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

  1. tozebaiao
    Member
    Posted 10 months 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 10 months ago #

    please read this post

  3. tozebaiao
    Member
    Posted 10 months 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 10 months ago #

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

  5. tozebaiao
    Member
    Posted 10 months ago #

    Thanks Shemesh. I will wait. RGDS

  6. shemesh
    Member
    Plugin Author

    Posted 10 months 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 10 months ago #

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

  8. shemesh
    Member
    Plugin Author

    Posted 10 months 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 10 months ago #

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

  10. lukeblackmore
    Member
    Posted 10 months 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 10 months 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 9 months 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 9 months ago #

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

Reply

You must log in to post.

About this Plugin

About this Topic

Tags

No tags yet.