Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
Google Maps v3 API
Hi,
I have a article (sticky) where i want to show a Google Map. Hope somebody knows a way to accomplish this. I know there are some Google maps plugins, as far as i know they all make use of the outdated V2 Api.
Hope somebody can help me.
Kind regards,
Maarten
Kind regards,
Maarten
Offline
Re: Google Maps v3 API
The admin side is v2 only afaik. For the public side i used this http://www.pittss.lv/jquery/gomap/.
Example:
<script type="text/javascript">
$(function() {
$("#map").goMap({
zoom: 15,
scrollwheel: false,
markers: [
<txp:article>
<txp:if_custom_field name="custom1">
{
latitude: <txp:custom_field name="custom1" default="59.363470" />,
longitude: <txp:custom_field name="custom2" default="18.176880" />,
icon: {
image: new google.maps.MarkerImage (
<txp:if_article_section name="politik">
'/ls/images/3.png',
<txp:else />
'/ls/images/4.png',
</txp:if_article_section>
new google.maps.Size(32, 37),
new google.maps.Point(0,0),
new google.maps.Point(0, 32)
)
},
html: {
content: '<txp:permlink><txp:title /></txp:permlink>',
popup:false
}
},
</txp:if_custom_field>
</txp:article>
],
hideByClick: true
});
});
</script>Offline
Re: Google Maps v3 API
As Mats, said once you have the coordinates, you can do with them anything, and use any implementation method and API version you want.
Pretty much any of those Map plugins is for selecting the coordinates, admin-side integrations. The plugin populates a custom field, or two, and then what you want to actually do with the coordinates is freely up to you.
Offline
Re: Google Maps v3 API
Hi guys,
Thanks for the super fast replies!!!
It’s clear know, with the example of Mats i will fix it.
Thanks.
Kind regards,
Maarten
Kind regards,
Maarten
Offline
Re: Google Maps v3 API
hi i was trying this out and haven’t gotten the map to show up at all.
here’s the load order in the head, links are ok ok:
<script type="text/javascript" src="<txp:site_url />js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="<txp:site_url />js/jquery.gomap-1.3.2.js"></script>here is what i have in the body, just the basic gomap example:
<script type="text/javascript">
$(function() {
$("#map").goMap({
markers: [{
latitude: 54.9566,
longitude: 7.7203,
title: 'marker title 1'
}]
});
$.goMap.createMarker({
address: 'Vilnius, Lithuania'
});
});
</script>A few Javascript warnings but they seem to be with the google maps api elements, nothing serious…
Still nothing is showing up at all. Any ideas on how to trouble shoot this?
Thanks
-Kevin
Last edited by kvnmcwebn (2011-11-13 19:38:03)
its a bad hen that wont scratch itself.
photogallery
Offline
Re: Google Maps v3 API
Hi!
You should only use
<div id="map"></div>in the body. The script stuff goes in the head and Google maps/goMap fixes the rest.
/Mats
Offline
Offline
Re: Google Maps v3 API
Hi, here is the Google Maps API v3 scripting I use, should suit what you want. No need to use jQuery or any TXP plugins for this task. Note that this is HTML5 format here so if your are using XHTML instead remember to also add the type="text/javascript" attribute to any <script> tags.
First, put this in your <head> section…
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>Next, you can place this in the <head> section – remember to enclose it in <script> tags if you do that – or (better) place it in an external js file…
function googlemap(){
// latitude / longitude coordinates
var latlng = new google.maps.LatLng(54.9566,7.7203);
// map options (more info: http://code.google.com/apis/maps/documentation/javascript/reference.html)
var myOptions = {
center: latlng, // The initial map center (required)
zoom: 13, // map default zoom level
mapTypeId: google.maps.MapTypeId.TERRAIN // map MapTypeId options: HYBRID, ROADMAP, TERRAIN, SATELLITE
};
// bind the script to a page element (<div id="map-canvas"></div>)
var map = new google.maps.Map(document.getElementById("map-canvas"),myOptions);
// add content to the popup window (change to suit your needs)
var contentString = '<address class="vcard">'+
'<h3 class="org">Your company name</h3>'+
'<p class="adr"><span class="extended-address">Your house/building name</span>, <span class="street-address">Your street</span><br>'+
'<span class="locality">Your town</span>, <span class="region">Your region</span>, <span class="postal-code">Your postal/zip code</span>, <span class="country">Your country</span></p>'+
'</address>';
// add a popup window
var infowindow = new google.maps.InfoWindow({content:contentString, zIndex: 10});
// add a map marker
var marker = new google.maps.Marker({position:latlng,map:map,title:"Hello from us!"});
// show popup window on marker click
google.maps.event.addListener(marker,'click',function(){infowindow.open(map,marker);});
}Then somewhere in your page <body>…
<div id="map-canvas"></div>Then at the bottom of your page code before the </body> tag…
<script>
googlemap();
</script>Just change options in the JavaScript above to your own details (and any extra options you want to add) and you’re good to go.
Cheers,
Phil
Last edited by philwareham (2011-11-20 11:56:01)
Offline
Re: Google Maps v3 API
so that option uses less code and is best for a simple contact page map.. thanks.
its a bad hen that wont scratch itself.
photogallery
Offline
Re: Google Maps v3 API
Yes, I reuse it on pretty much every site I code. Just remember to also define a size for the map in your CSS, such as…
#map-canvas {
width: 640px;
height: 320px;
}You can also make your maps responsive using this method and some CSS media queries, so it can scale well to various devices.
Last edited by philwareham (2011-11-16 11:44:43)
Offline
Re: Google Maps v3 API
hi phil,
the map is not showing up. I put the script in the head but i think it’s something with that. Not sure.
its a bad hen that wont scratch itself.
photogallery
Offline
Re: Google Maps v3 API
Hello Kevin,
Send me a link to the page and I’ll take a look at what’s wrong.
Cheers, Phil
Offline