WordPress.org

Ready to get started?Download WordPress

Forums

Contact Form 7 Map Field
[resolved] Changing to google maps (21 posts)

  1. slimkaos
    Member
    Posted 1 year ago #

    Hi Shemesh, Could you explain to me how i would change this plugin over to google maps?

    Also is it possible to use a wpcf7 field that could be used to geocode an address onto the map?

    Thanks

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

  2. shemesh
    Member
    Plugin Author

    Posted 1 year ago #

    slimkaos hi,
    you should know a bit of html, javascript, and you map's api.
    than you can edit the plugin code to your liking.

    the latest version does have the geocode option, you can see an example here

  3. slimkaos
    Member
    Posted 1 year ago #

    I'm comfortable with HTML, im a bit new to javascript and know a little bit about the google maps api, could you point me in the right direction of where to start editing?

    I see the geolocation funtion in that example, is their going to be a postcode or address box that converts to lat/lng and sets a marker?

  4. shemesh
    Member
    Plugin Author

    Posted 1 year ago #

    the place where you should play is editing: contact-form-7-map-field/map-code-leaflet.html

    i have some old code using google maps, i'll post it later.

  5. slimkaos
    Member
    Posted 1 year ago #

    Thanks, Shemesh that would be great if you could post the old code.

  6. shemesh
    Member
    Plugin Author

    Posted 1 year ago #

    help me to help you...
    what is the purpose of this change?
    why would you need google maps?
    see the map provider chooser at top-right over here, would this be a solution good for you?

  7. slimkaos
    Member
    Posted 1 year ago #

    i need google maps as i need the user to be able to see a satellite image of their house to then set the marker on.

  8. slimkaos
    Member
    Posted 1 year ago #

    i would need the map to default on google satellite maps, so that when the user inputs their postcode the map then centres on the area and they can then use the marker to show their house.

  9. slimkaos
    Member
    Posted 1 year ago #

    var mapUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';

    i'm looking at the line above, and believe that google maps doesnt allow a dynamic url in their api?

    so i'm unsure about what to substitute this for?

  10. shemesh
    Member
    Plugin Author

    Posted 1 year ago #

    here...
    edit: contact-form-7-map-field/map-code-leaflet.html
    add those 2 lines right under .../leaflet.js
    <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>

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

    and it should work. it worked for me.

  11. shemesh
    Member
    Plugin Author

    Posted 1 year ago #

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

  12. shemesh
    Member
    Plugin Author

    Posted 1 year ago #

    btw... if you want you can add a control to let the user choose the map type.

  13. slimkaos
    Member
    Posted 1 year ago #

    Fantastic, thats worked a treat.

    I dont suppose you know how i would create a cf7 field for postcode that would then geocode to latlng and centre the map?

  14. shemesh
    Member
    Plugin Author

    Posted 1 year ago #

    glad i could help! Leaflet is so easy.

  15. shemesh
    Member
    Plugin Author

    Posted 1 year ago #

    about the postcode, i've just googled: "postcode geocode"
    seems it depends on the country. you'll probably need to write some code.

  16. slimkaos
    Member
    Posted 1 year ago #

    Thanks for your help :)

    i'm uk based and have tried coding in the Geocode for google, but i'm lost my page is http://mysolarquotes.com/comprehensive-quote/

    could you have a look and see if you see anything obvious incorrect in the code?

  17. shemesh
    Member
    Plugin Author

    Posted 1 year ago #

    it is nice to see my plugin working :-)
    about the geocode - it is not relevant to this discussion, please open a new one.

  18. MakeYourselfVisible
    Member
    Posted 1 year ago #

    Hi Shemesh,

    Thank you for the awesome plugin!

    I've followed the steps here to convert the map into a Google Map and that's working great but I'm wondering if you can tell me how to turn it into a hybrid map instead of the satellite image (to include city names and streets).

    Thanks!
    David

  19. shemesh
    Member
    Plugin Author

    Posted 1 year ago #

    var ggl = new L.Google('HYBRID');

  20. lukeblackmore
    Member
    Posted 8 months ago #

    Hi

    Your explanation no longer seems to work - furthermore the form examples linked to throughout the thread no longer work either.. Any ideas what to fix here?

    Many thanks

  21. shemesh
    Member
    Plugin Author

    Posted 8 months ago #

    you are correct, look at this post for correct use.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags

No tags yet.