I have a wordpress site with a large number of pages, each page represent a physical location. Now for each page I would like to display a google map based on the address.
I know I can do this by installing a google map plugin, but that requires that I manually, for every post, create a location based on the address and add a shortcode to the post/page that results in a google map. This is a LOT of work for this site with hundreds of locations.
I would like to be able to create an "address-custom-field" for each post programmatically.
This is where I am now:
<div id="map_canvas" style="width: 190px; height: 130px; margin-top: 5px;"></div>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=mykey&sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var myOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}
</script>
How do i change center: new google.maps.LatLng(-34.397, 150.644), into an adress?
You can edit the template file for these pages and embed a google map similarly to this example: https://developers.google.com/maps/documentation/javascript/examples/geocoding-simple
Note that it'll be better to perform geo coding of all addresses once, and save the coordinates in different custom field for each page -- that way you won't need to create geocoding request on each page load.
Here is untested code that should be close to what you need:
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<!-- in the body -->
<div id="map-canvas"></div>
<script>
(function () {
var map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var address = <?php echo json_encode(get_post_meta(get_the_id(), 'address-custom-field', true)) ?>" ;
(new google.maps.Geocoder()).geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
})()
</script>
I'm in the middle of this myself... Its no easy feat that's for sure. It involves AJAX (WordPress version) Geo-Data-Store plugin to geocode your posts and pages and custom loops.
Either way you have to add location data to each post.
Related
I've got a google map embedded in an angular view and it displays (as shown below - right) some of the times and then shows up as grey (below - left) when I refresh the page.
My reference to google is in the page head like this:
<script src="https://maps.google.com/maps/api/js?key=<api_key>" type="text/javascript"></script>
My html (in the angular view), looks like this:
<div id="map_canvas" style="width: 100%; height: 300px"></div>
My code in the controller for the view looks like this:
var geocoder = new google.maps.Geocoder();
geocoder.geocode({ 'address': addressLine }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var myLatLng = { lat: results[0].geometry.location.lat(),
lng: results[0].geometry.location.lng() };
var myOptions = { zoom: 8, center: myLatLng };
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: name
});
}
});
Does anyone know why this might happen? Or have experienced this before?
Thanks in advance!
Create a directive for your Google maps. The state's controller executes before the view is loaded. A directive's controller will load after the view.
There are more than likely plenty of Google Map directives out there. So just find something that already exists and tweak it.
For example: http://angular-ui.github.io/angular-google-maps/#!/
I am currently stuck on getting google maps to display on a site. This worked in a dev environment after a while. I came to put this into live and thought that I would just need the API key in the src
What I have is
<script src="https://maps.googleapis.com/maps/api/js?key=MY_API CODE HERE&callback=initMap"
async defer></script>
<script type="text/javascript">
initialize();
function initialize() {
google.maps.event.addDomListener(window, 'load', function () {
codeAddress("#Model.Postcode, #Model.Address");
});
}
var geocoder;
var map;
function codeAddress(address) {
geocoder = new google.maps.Geocoder();
geocoder.geocode({ 'address': address }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var myOptions = {
zoom: 17,
center: results[0].geometry.location,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
// create a marker
var marker = new google.maps.Marker({
position: results[0].geometry.location,
map: map,
title: 'Latitude: ' + results[0].geometry.location.Ya + ' Longitude :' + results[0].geometry.location.Za
});
}
});
}
But this only produces the error of
This page was unable to display a Google Maps element. The provided Google API key is invalid or this site is not authorized to use it.
Many thanks
You first have to obtain an API key from the website and replace it with the "MY_API CODE HERE" part
That should be working, just because we all make mistakes, are you sure you copied the API key correctly? You need to make sure the trailing '&' is still in there after you add the key.
You could also try generating another key and using that. The process for doing that is here: https://developers.google.com/maps/documentation/javascript/get-api-key#key
I'm trying to set a contact page in which I display google's map to indicate the place of a meet. I'm currently using using these codes:
js
(function(){
document.getElementById('map_canvas').style.display="block";
var myOptions = {
zoom: 14,
center: new google.maps.LatLng(0.0, 0.0)
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
})();
html
<script type="application/javascript" src="/js/google-map.js">
<div id="map_canvas" style="width:80%; height: 400px; margin:auto;"></div>
The problem is that I couldn't be able to mark the indicated place like in google map to precise to the user the indicated place. Any brilliant idea, please?
First you need to define the Latitude and Longitude of the mark
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
Then you need to add a marker:
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World!'
});
Take a look at
https://developers.google.com/maps/documentation/javascript/examples/marker-simple?hl=es
I am new to Google Maps API and I have the Google Map below working. However, I am having a hard time understanding how to set an address. I have 2,000 entries that each include an address stored in a database and I have all the data needed to 'set' the address for the map onLoad of the description page, given the opportunity. However, I am not sure how to do this. I was wondering if someone can show me a basic example of setting the address, city, state, zip and then having a marker on the map as well.
In addition, I am confused as to, if I have all the components of the address separated, I am not required to geocode, correct? Doesn't geocode just make it easy to create a map from an unparsed / long address string and puts a limitation on the number of times you can request a geocode? In other words, if I have all the address components (such as zip, city, state, address, etc) stored in a DB, then can't I set an address without being constrained by google maps geocoding limitations?
Following address:
123 Flower Street, Miami, Florida 32826
My JS so far...
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
I appreciate any suggestions!
Many thanks in advance!
You are looking for geocoding: https://developers.google.com/maps/documentation/geocoding/
Here you have code which query google for a location of your address and then point a marker on received position:
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
var geocoder = new google.maps.Geocoder();
geocoder.geocode({ 'address': "123 Flower Street, Miami, Florida 32826" }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
});
} else
alert("Problem with geolocation");
});
}
google.maps.event.addDomListener(window, 'load', initialize);
I am trying to use the google maps javascript API to map an address based on this example.
https://google-developers.appspot.com/maps/documentation/javascript/examples/geocoding-simple
The documentation recommends the clientside javascript approach as the best way to deal with quotas on requests. So far so good. My problem is in moving from this example to my specific case. My addresses are already in a database so I don't need the user to enter one. Also I do not want the map to load with the page. Instead, I want the map for the address to load when the user clicks a link.
I have a script working that loads the map in a div using initialize (). But my problem is getting initialize to work with geocode. The geocode in the example depends on initialize loading with bodyonload which I do not want.
Here is code. Would appreciate any suggestions:
javascript
var map;
var geocoder;
function codeAddress() {
var address = document.getElementById('address').value;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(40.7562008,-73.9903784);
var myOptions = {
zoom: 18,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
html
<input id="address" type="hidden" value="Palo Alto CA">
View map without geocoding
<div id="map_canvas" style="width:300px; height:300px;"></div>
View map of geocoded address
The only issue I had with your script was the following line in the initialize() function:
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
By declaring var map, your script is just declaring a local variable named map, as opposed to using the global map variable declared at the top of your script.
By removing var, the script uses the global variable and runs fine:
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
Finally, to get the geocoded map to load on the link click, change onclick for your geocoded address to onclick="initialize();codeAddress();".
Added:
Try combining your initialize() and codeAddress() methods into the following:
function initialize() {
geocoder = new google.maps.Geocoder();
var address = document.getElementById('address').value;
geocoder.geocode({ 'address': address }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var myOptions = {
zoom: 18,
center: results[0].geometry.location,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
And then just call initialize() from your link.
Basically, what we're doing is taking the call to geocoder.geocode() that codeAddress() was performing and inside the resulting delegate, we're using results[0].geometry.location to initialize the map. This way, the temporary latlong doesn't need to be displayed.