Support » Plugin: Contact Form 7 Map Field » Google Maps

  • Resolved tozebaiao

    (@tozebaiao)


    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/

Viewing 12 replies - 1 through 12 (of 12 total)
  • Plugin Author shemesh

    (@shemesh)

    please read this post

    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

    Plugin Author shemesh

    (@shemesh)

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

    Thanks Shemesh. I will wait. RGDS

    Plugin Author shemesh

    (@shemesh)

    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);

    Plugin Author shemesh

    (@shemesh)

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

    Plugin Author shemesh

    (@shemesh)

    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/

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

    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/

    Plugin Author shemesh

    (@shemesh)

    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.

    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

    Plugin Author shemesh

    (@shemesh)

    try changing the “minZoom: 2”. it might do the trick.

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘Google Maps’ is closed to new replies.