Changing to google maps

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

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?

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.

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

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?

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.

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.

var mapUrl = ‘https://{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?

here…
edit: contact-form-7-map-field/map-code-leaflet.html
add those 2 lines right under …/leaflet.js
<script type=”text/javascript” src=”https://maps.google.com/maps/api/js?sensor=false”></script&gt;
<script src=”https://raw.github.com/shramov/leaflet-plugins/master/layer/tile/Google.js”></script&gt;

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.

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

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

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?

glad i could help! Leaflet is so easy.

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

Thanks for your help ??

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

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