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);
}
});
}
}
Related
I have such code for insert location and mark it on google maps:
<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.243240, 21.030295);
var mapOptions = {
zoom: 8,
center: latlng
}
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
});
var input = results[0].geometry.location;
document.getElementById("wypisz").innerHTML=input;
//document.getElementById("wypisz").innerHTML = results[0].geometry.location.lng;
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
// document.write(position);
</script>
In this 2 lines I obtain my coordinates of location "(52.1553949, 21.07453620000001)" for example and display it on page:
var input = results[0].geometry.location;
document.getElementById("wypisz").innerHTML=input;
What I can't do is to split string "input" on 2 substrings (lat and lng), and save it to Mysql DB, into table with lat and lng (both float types).
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/>
The code below will display the city, state chosen by user from previous page of website. However, map first loads LatLong location, then opens city, state. How can the LatLong variable be eliminated so it does not load? Just want city, state to display.
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&sensor=false"></script>
<script type="text/javascript">
var geocoder;
var map;
var marker;
function initialize() {
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);
geocoder = new google.maps.Geocoder();
marker = new google.maps.Marker({
map: map,
draggable: true
});
showAddress('"<?php echo $_SESSION['city_name']; ?>"');
}
function showAddress(address) {
geocoder.geocode({'address': address}, function(results, status) {
if (status != google.maps.GeocoderStatus.OK) {
return;
}
if (results.length > 1) {
alert('Multiple addresses found; showing first one ...');
}
$.each(results, function(i, item) {
var location = new google.maps.LatLng(item.geometry.location.lat(), item.geometry.location.lng());
marker.setPosition(location);
map.setCenter(location);
return false;
});
});
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
You know you could always find the lat-long for the specific city you are looking for and zoom to the right level to fit the area into view. That's how I used it.
Or you could use the geocoder result to send value to latlang
So you will need to call geocoder.geocode() before you initialize the map
Use the line already in your code:
var location = new google.maps.LatLng(item.geometry.location.lat(), item.geometry.location.lng());
and then place this after:
var latlng = location;
Then use the latlng to initialize the map
So you code should look like this:
<script type="text/javascript">
var geocoder;
var map;
var marker;
function initialize() {
/*Go through the following to understand what I'm trying to get at.*/
var address = "<?php echo $_SESSION['city_name']; ?>";
geocoder = new google.maps.Geocoder(); // This was removed from below. Compare with your code.
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var latlang = results[0].geometry.location; }
else { alert("The location cannot be mapped"); }
});
/* Up until here. */
var mapOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
marker = new google.maps.Marker({
map: map,
draggable: true
});
showAddress('"<?php echo $_SESSION['city_name']; ?>"');
}
function showAddress(address) {
geocoder.geocode({'address': address}, function(results, status) {
if (status != google.maps.GeocoderStatus.OK) {
return;
}
if (results.length > 1) {
alert('Multiple addresses found; showing first one ...');
}
$.each(results, function(i, item) {
var location = new google.maps.LatLng(item.geometry.location.lat(), item.geometry.location.lng());
marker.setPosition(location);
map.setCenter(location);
return false;
});
});
}
</script>
This should work.
I'm trying to do two things from the code below:
If the geocode is not successfull don't show the map (so far I've only hidden the error message.)
If it is successful only load the address and not the original latlng before reloading the address.
You'll have to excuse all the single quote marks, the javascript loads under a php echo.
Any ideas welcome, ideally I'd like to handle it in the javascript but don't mind a bit of php if needed, I'm looking to use this in a few areas of the site.
echo '
<script type="text/javascript">
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(51.500141,-0.125195);
var address = \''.$company.', '.$address_l1.', '.$address_l2.', '.$address_l3.', '.$town.', '.$county.', '.$post_code.', '.$country.'\';
var myOptions = {
zoom: 16,
scrollwheel: false,
navigationControl: false,
mapTypeControl: false,
scaleControl: false,
streetViewControl: false,
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>
<div id="map_canvas"></div>
';
Move the map creation into the success function of geocode and use document.getElementById('map_canvas').style.display='block' or none to show/hide the map on fail.
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);
}
});
}