I'm following this tuorial -https://developers.google.com/maps/documentation/javascript/examples/geocoding-simple
I've put in the code <?php echo the_field('post_code'); ?> but I want to geocode it on load, not via an input and submit. How can I do that?
This is what I have:
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(52.375599, -3.471680);
var mapOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
function codeAddress() {
var address = '<?php echo the_field('post_code'); ?>';
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);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="map-canvas" style="float:left;height:250px; width:625px;margin-top:25px;"></div>
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(52.375599, -3.471680);
var mapOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
codeAddress(); // This should do it. Assuming all the code is working.
}
Call codeAddress() in initialize() passing address as parameter.
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(52.375599, -3.471680);
var mapOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
codeAddress(address);
}
Related
Here is my current code (i feel the problem is in my codeAddress function):
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>`
<script>
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var mapOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
}
function codeAddress() {
var address = document.getElementById("address").text;
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);
}
});
}
google.maps.event.addDomListener(window, 'load', codeAddress);
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="map-canvas" style="width: 100%; height: 320px;" ></div>
<div id="address">92867</div>
What I want to do is when the page loads, the address will be populated via PHP. I want the codeAddress to run with the populated address. How can I tweak this script to replace this var latlng = new google.maps.LatLng(-34.397, 150.644); with the correct code for my specified address.
remove google.maps.event.addDomListener(window, 'load', codeAddress);and add this:
codeAddress() to the end of initialize() , to ensure that the map has been created when codeAddress(); will be executed
replace this line:var address = document.getElementById("address").text;by that line:var address = document.getElementById("address").firstChild.data;There is no text-property for a <div/>
i have a magento site where my products are businesses.
I want to add a google map to the product page and need someone to help me with my code.
I can call the zip code by typing
<?php echo $_product->getpostcode() ?>
I have taken code from the internet and am trying to put it together for my site. here is the code:
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
var geocoder;
var map;
var address = '<?php echo $_product->getpostcode() ?>'
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var mapOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
}
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);
}
});
}
</script>
<body onload="initialize()">
<div id="map_canvas" style="width: 500px; height: 300px"></div>
At the moment it is using the lat long in the code. How can i change it to using the zip code?`
Maps always use co-ordinates. That how maps work. If you want to use a zipcode, you need to convert that to co-ordinates — that process is called geocoding.
You have a geocoding function in your code, which won't work at the moment because you don't have an element called address, but it can be used with a little adjustment.
You currently have a global variable called address, which contains your zipcode, so get your geocoder function to use it:
At the bottom of function initialize(), add a call to the geocoder function, passing it the global variable:
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
codeAddress(address);
}
Change that function to accept a parameter:
function codeAddress(addy) {
and then to use it:
// var address = document.getElementById('address').value;
// The above line needs to be removed; the one below amended
geocoder.geocode( { 'address': addy}, function(results, status) {
//i have working function use it.
function initialize() {
var address = "<?php echo $address?>";
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(50.317408,11.12915);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("location-canvas"), myOptions);
if (geocoder) {
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
map.setCenter(results[0].geometry.location);
var infowindow = new google.maps.InfoWindow(
{ content: '<b>'+address+'</b>',
size: new google.maps.Size(150,50)
});
var marker = new google.maps.Marker({
position: results[0].geometry.location,
map: map,
title:address
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
} else {
alert("Address Not found");
}
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
}
I've managed to trial/error put together a working google v3 api that geocodes an address coming from the database.
Now I"m trying to accomplish two final tasks:
The map flashes the original geocode (34.05,-118.24) that is set before the api geocodes the variable I've passed to it. When I remove this lat/long, the map doesn't work at all. How can I stop the map from flashing the original lat/long before geocoding the address I've given it?
I'd like the user to be able to click the marker and get a result (i.e. "Hello World"). So far with trial and error I have not been able to successfully get the marker to be clickable.
Please help!! Thanks in advance as always.
$address, $city, $state and such are php variables coming from mysql
My google script looks like this:
<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(34.052234,-118.243685);
var address = '<?php echo $address.', '.$city.', '.$state; ?>';
var myOptions = {
zoom: 14,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
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>
So to make the marker clickable, you need to have an event listener on it. Also you'll want an infowindow to display your 'hello world'. This does both, add it into your initialize function.
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
var infowindow = new google.maps.InfoWindow({
content: 'Hello World!',
map: map
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, this);
});
I would also consider doing the geocoding of your address before you create the map, so you can use results[0].geometry.location to set the map center initially.
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(34.052234,-118.243685);
var address = '<?php echo $address.', '.$city.', '.$state; ?>';
var myOptions = {
zoom: 14,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
myOptions.center = results[0].geometry.location;
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
var infowindow = new google.maps.InfoWindow({
content: 'Hello World!',
map: map
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, this);
});
} else {
alert("Geocode was not successful for the following reason: " + status);
// just open the map at the default latlng
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
});
}
I'm using directions for Google Maps V3 API. However I get the javscript error when i run it:
Uncaught ReferenceError: request is not defined
This is my JS code:
<script type="text/javascript">
var directionDisplay; //NEW CODE
var directionsService = new google.maps.DirectionsService(); //NEW CODE
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer(); //NEW CODE
var latlng = new google.maps.LatLng(1.288693,103.846733);
var options = {
zoom: 16,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: true
};
var map = new google.maps.Map(document.getElementById('map_canvas'), options);
directionsDisplay.setMap(map);
marker1 = new google.maps.Marker({
position: new google.maps.LatLng(1.288693,103.846733),
map: map
});
marker2 = new google.maps.Marker({
position: new google.maps.LatLng(1.288693,103.846733),
map: map
});
google.maps.event.addListener(marker1, "mouseover", function(event) {
this.setIcon("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=1|ffffff|c41200");
});
google.maps.event.addListener(marker1, "mouseout", function(event) {
this.setIcon("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=1|c41200|ffffff");
});
google.maps.event.addListener(marker1, "click", function(event) {
window.location = "http://localhost/yupsg/places/display/111";
});
google.maps.event.addListener(marker2, "mouseover", function(event) {
this.setIcon("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=2|ffffff|c41200");
});
google.maps.event.addListener(marker2, "mouseout", function(event) {
this.setIcon("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=2|c41200|ffffff");
});
google.maps.event.addListener(marker2, "click", function(event) {
window.location = "http://localhost/yupsg/places/display/111";
});
var LatLngList = [
new google.maps.LatLng(1.288693,103.846733),
new google.maps.LatLng(1.288693,103.846733)
];
}
function changeMarkerOnmouseover(marker) {
marker.setIcon("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=1|ffffff|c41200");
}
function changeMarkerOnmouseout(marker) {
marker.setIcon("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=1|c41200|ffffff");
}
function changeMarkerOnmouseover(marker) {
marker.setIcon("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=2|ffffff|c41200");
}
function changeMarkerOnmouseout(marker) {
marker.setIcon("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=2|c41200|ffffff");
}
//NEW CODE FOR NEW FUNCTION
function calcRoute() {
var start = "35 Oxford Street, Cambridge, MA 02138";
var end = "24 Oxford Street, Cambridge, MA 02138";
var request = {
origin:start,
destination:end,
travelMode: google.maps.TravelMode.DRIVING
};
}
directionsService.route(request, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(result);
}
});
</script></head>
You are defining request inside the scope of calcRoute() but then trying to use it outside immedately afterwards outside of calcRoute(). Define it in the same scope where you will use it.
It appears that there might be a few other errors in there too. Here's the end result of my trying to make minimal edits to get your code to work. Hope it helps!
<html>
<head>
<title>Maps Test</title>
<script type="application/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
</head>
<body>
<h1>Map</h1>
<div id="map_canvas" style="height:100%; width:100%;"></div>
<script type="text/javascript">
var directionsDisplay; //NEW CODE
var directionsService = new google.maps.DirectionsService(); //NEW CODE
directionsDisplay = new google.maps.DirectionsRenderer(); //NEW CODE
var latlng = new google.maps.LatLng(1.288693,103.846733);
var options = {
zoom: 16,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: true
};
var map = new google.maps.Map(document.getElementById('map_canvas'), options);
directionsDisplay.setMap(map);
marker1 = new google.maps.Marker({
position: new google.maps.LatLng(1.288693,103.846733),
map: map
});
marker2 = new google.maps.Marker({
position: new google.maps.LatLng(1.288693,103.846733),
map: map
});
google.maps.event.addListener(marker1, "mouseover", function(event) {
this.setIcon("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=1|ffffff|c41200");
});
google.maps.event.addListener(marker1, "mouseout", function(event) {
this.setIcon("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=1|c41200|ffffff");
});
google.maps.event.addListener(marker1, "click", function(event) {
window.location = "http://localhost/yupsg/places/display/111";
});
google.maps.event.addListener(marker2, "mouseover", function(event) {
this.setIcon("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=2|ffffff|c41200");
});
google.maps.event.addListener(marker2, "mouseout", function(event) {
this.setIcon("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=2|c41200|ffffff");
});
google.maps.event.addListener(marker2, "click", function(event) {
window.location = "http://localhost/yupsg/places/display/111";
});
var LatLngList = [
new google.maps.LatLng(1.288693,103.846733),
new google.maps.LatLng(1.288693,103.846733)
];
function changeMarkerOnmouseover(marker) {
marker.setIcon("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=1|ffffff|c41200");
}
function changeMarkerOnmouseout(marker) {
marker.setIcon("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=1|c41200|ffffff");
}
function changeMarkerOnmouseover(marker) {
marker.setIcon("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=2|ffffff|c41200");
}
function changeMarkerOnmouseout(marker) {
marker.setIcon("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=2|c41200|ffffff");
}
var start = "35 Oxford Street, Cambridge, MA 02138";
var end = "24 Oxford Street, Cambridge, MA 02138";
var request = {
origin:start,
destination:end,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(result);
}
});
</script>
</body>
</html>
I'm having an issue with setting up the info windows for multiple markers in google map api. Basically, Im getting the latitudes and longitudes and everything else from external Json file. I'm parsing it correctly because markers are showing on the map. However, when I'm trying to add an info window for each one of them it only show info window for the most recent added marker + whenever I point on different marker it will still go to this latest marker showing its info window. Here's the source code:
function initialize()
{
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 1,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("tab14"), myOptions);
/* Sets up markers */
markers = [];
for (var i = 0, coordinates; coordinates = data.coords[i]; i++)
{
//marker = new google.maps.LatLng(coordinates.latitude, coordinates.longitude);
var iconImage = new google.maps.MarkerImage("http://map.lgfl.org.uk/images/arrow_green.png");
var LatLng = new google.maps.LatLng(coordinates.latitude, coordinates.longitude);
var marker = new google.maps.Marker({position: LatLng, icon: iconImage });
var contentString = '<div>'+
'<div>'+
'</div>'+
'<h4>'+coordinates.title+'</h1>'+
'<div>'+
'<p>'+coordinates.excerpt+'</p>'+
'</div>'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
markers.push(marker);
}
/* Sets up marker clusterer */
var markerCluster = new MarkerClusterer(map, markers);
}
Can someone please give me some help with this? Thanks.
//Edited------------------------------------------------------
So I've changed it and now it looks like this:
infoWindow = new google.maps.InfoWindow();
for (var i = 0, coordinates; coordinates = data.coords[i]; i++)
{
//marker = new google.maps.LatLng(coordinates.latitude, coordinates.longitude);
var iconImage = new google.maps.MarkerImage("http://map.lgfl.org.uk/images/arrow_green.png");
var LatLng = new google.maps.LatLng(coordinates.latitude, coordinates.longitude);
var marker = new google.maps.Marker({position: LatLng, icon: iconImage });
var contentString = '<div>'+
'<div>'+
'</div>'+
'<h4>'+coordinates.title+'</h1>'+
'<div>'+
'<p>'+coordinates.excerpt+'</p>'+
'</div>'+
'</div>';
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(contentString);
infoWindow.open(map,marker);
});
markers.push(marker);
}
/* Sets up marker clusterer */
var markerCluster = new MarkerClusterer(map, markers);
Still doesn't work :/
As far as I know, you can only have one InfoWindow. You should add a onclick event to each marker in which you define the content of the window.
I think you should change:
var infowindow = new google.maps.InfoWindow({
content: contentString
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
to something like:
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map,marker);
});
The infoWindow should be defined outside your for loop.
Good luck!
** EDIT **
I think you need to use unique names for your markers.
This is a working example:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script src="http://maps.google.com/maps/api/js?v=3&sensor=false&key=
<<INSERT YOUR KEY HERE>>" type="text/javascript"></script>
<script>
function initialize() {
// Create google map
var latlng = new google.maps.LatLng(31.0293534,5.1736923);
var myOptions = {
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoom: 1,
backgroundColor: "#99B3CC",
mapTypeControl: false
}
var map = new google.maps.Map(document.getElementById("map"), myOptions);
var infoWindow = new google.maps.InfoWindow();
/**
* First marker
*/
var latLng = new google.maps.LatLng(31.0293534,5.1736923);
var marker1 = new google.maps.Marker({
map: map,
position: latLng,
visible: true
});
google.maps.event.addListener(marker1, 'click', function() {
infoWindow.setContent("Some content Marker 1");
infoWindow.open(map,marker1);
});
/**
* Second marker
*/
var latLng = new google.maps.LatLng(25.271139,55.307485);
var marker2 = new google.maps.Marker({
map: map,
position: latLng,
visible: true
});
marker2.onclick = function() {
infoWindow.setContent("Some content marker2");
infoWindow.open(map,marker2);
};
google.maps.event.addListener(marker2, 'click', function() {
infoWindow.setContent("Some content marker2");
infoWindow.open(map,marker2);
});
}
window.onload=initialize;
</script>
</head>
<body>
<div id="map" style="width: 400px; height: 400px;"></div>
</body>
</html>
You may have to change the key. But at my place this works like a charm. The most simple example I can give you.
Ok I've found a solution to this. It's kinda a hack but it works for me. I'm putting it here in case someone else would need it:
<script type="text/javascript">
/* Sets up the map with markers */
function initialize()
{
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 1,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("tab14"), myOptions);
/* Sets up markers */
markers = [];
infoWindow = new google.maps.InfoWindow();
for (var i = 0, coordinates; coordinates = data.coords[i]; i++)
{
var iconImage = new google.maps.MarkerImage("http://map.lgfl.org.uk/images/arrow_green.png");
var LatLng = new google.maps.LatLng(coordinates.latitude, coordinates.longitude);
var marker = new google.maps.Marker({position: LatLng, icon: iconImage });
var contentString = '<div>'+
'<h4>'+coordinates.title+'</h1>'+
'<div>'+
'<p>'+coordinates.excerpt+'</p>'+
'</div>'+
'</div>';
addMarker(marker, contentString);
markers.push(marker);
}
/* Sets up marker clusterer */
var markerCluster = new MarkerClusterer(map, markers);
function addMarker(marker, content)
{
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(content);
infoWindow.open(map, marker);
});
}
}
</script>